Added responsiveness to the settings modal for mobile devices

[WhiteSnek]

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:

After:

[CLAassistant]

All committers have signed the CLA.

[graphite-app]

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.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 7dfd8ec. 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

• nx build @affine/server-native --verbose -- --target x86_64-unknown-linux-gnu --use-napi-cross

---

Sent with 💌 from NxCloud.

[mrdjohnson]

Random guy here 👋

• the value for the display language appears to be missing in your "after", maybe its pushed too far to the left?
• not a designer but if possible it would be nice if the modal was full screened (or at least smaller margins) for mobile devices no?

[WhiteSnek]

Random guy here 👋

* the value for the display language appears to be missing in your "after", maybe its pushed too far to the left?

* not a designer but if possible it would be nice if the modal was full screened (or at least smaller margins) for mobile devices no?

you're right. i'll fix it

[WhiteSnek]

@EYHN @mrdjohnson i've implemented the changes