Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added responsiveness to the settings modal for mobile devices #8484

Open
wants to merge 2 commits into
base: canary
Choose a base branch
from

Conversation

WhiteSnek
Copy link

Description

This PR makes the settings modal responsive for mobile devices. It adjusts the layout, font sizes, and spacing to improve usability on smaller screens.

Changes

  • Added responsive styles to ensure the modal works well on mobile devices.
  • Updated layout and element sizes for better touch interaction and readability.

Before:

Screenshot 2024-10-12 at 21-25-02 AFFiNE

After:

Screenshot 2024-10-12 at 21-51-26 AFFiNE

@CLAassistant
Copy link

CLAassistant commented Oct 12, 2024

CLA assistant check
All committers have signed the CLA.

Copy link

graphite-app bot commented Oct 12, 2024

Your org has enabled the Graphite merge queue for merging into canary

Add the label “merge” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

Copy link

nx-cloud bot commented Oct 13, 2024

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 97ba0cd. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 1 target

Sent with 💌 from NxCloud.

@@ -145,14 +147,20 @@ export const SettingSidebar = ({
[onTabChange]
);

const isMobile = window.innerWidth <= 768;
Copy link
Member

@EYHN EYHN Oct 14, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about put it in css, and using media query + display: none ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants