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[bot]]

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[bot]]

View your CI Pipeline Execution ↗ for commit 7dfd8ecc19156f9f27adc9bed823d5d9aba939a7.

Command	Status	Duration	Result
nx build @affine/native --verbose -- --target a...	❌ Failed	<1s	View ↗
nx build @affine/native --verbose -- --target x...	❌ Failed	<1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2025-01-02 09:28:47 UTC

[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