fix: Settings - General section responsiveness#1557
fix: Settings - General section responsiveness#1557samrathreddy wants to merge 2 commits intoMail-0:stagingfrom
Conversation
WalkthroughThis update refines the responsive layout and styling of the general settings page in the mail app. Adjustments focus on flex directions, spacing, alignment, width constraints, and component-specific classes to enhance appearance and usability on various screen sizes. No logic or event handling changes are included. Changes
Sequence Diagram(s)Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (1)
apps/mail/app/(routes)/settings/general/page.tsx (1)
64-70:md:w-46is not a valid Tailwind utility – will render no CSSTailwind ships widths in even numbers (
w-44,w-48, …) or arbitrary values (w-[11.5rem]).
md:w-46is therefore ignored at runtime, breaking the medium-viewport layout you just fixed.- className="w-full md:w-46 flex items-center justify-start mt-2 py-1 h-9" + className="w-full md:w-48 flex items-center justify-start mt-2 py-1 h-9" +/* or keep the intended width exactly */ +# className="w-full md:w-[11.5rem] flex items-center justify-start mt-2 py-1 h-9"
🧹 Nitpick comments (3)
apps/mail/app/(routes)/settings/general/page.tsx (3)
295-309: Styling inconsistency between “Zero signature” and “Auto-read” blocks
zeroSignaturecontainer lost the subtle shadow that was added toautoRead, leading to a visual mismatch.-<FormItem className="flex flex-col sm:flex-row max-w-xl items-start sm:items-center justify-between rounded-lg border px-3 py-3 gap-3"> +<FormItem className="flex flex-col sm:flex-row max-w-xl items-start sm:items-center justify-between rounded-lg border px-3 py-3 gap-3 shadow-sm">Unifying both blocks improves consistency and prevents future design drift.
78-83: Minor UX: focus the search input when the pop-over opensUsers still need an extra click after expanding the timezone list.
Placing focus programmatically makes keyboard navigation smoother.Quick patch (inside
PopoverContent):<input ... - onChange={(e) => setTimezoneSearch(e.target.value)} + onChange={(e) => setTimezoneSearch(e.target.value)} + autoFocus />
40-47: Avoidanyfor translation helper
tis typed asany, forfeiting autocomplete and type-safety across the component tree.
Declare the correct signature fromuseTranslations().- t: any; + t: ReturnType<typeof useTranslations>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/mail/app/(routes)/settings/general/page.tsx(6 hunks)
🧰 Additional context used
🧠 Learnings (1)
apps/mail/app/(routes)/settings/general/page.tsx (2)
Learnt from: retrogtx
PR: Mail-0/Zero#1468
File: apps/server/src/trpc/routes/mail.ts:331-331
Timestamp: 2025-06-28T03:56:09.351Z
Learning: In apps/server/src/trpc/routes/mail.ts, the user indicated they are not using ISO format for the scheduleAt parameter, despite the frontend code showing toISOString() usage in the ScheduleSendPicker component.
Learnt from: retrogtx
PR: Mail-0/Zero#1328
File: apps/mail/lib/hotkeys/mail-list-hotkeys.tsx:202-209
Timestamp: 2025-06-18T17:26:50.918Z
Learning: In apps/mail/lib/hotkeys/mail-list-hotkeys.tsx, the switchCategoryByIndex function using hardcoded indices for category hotkeys does not break when users reorder categories, contrary to the theoretical index-shifting issue. The actual implementation has constraints or mechanisms that prevent hotkey targeting issues.
🔇 Additional comments (1)
apps/mail/app/(routes)/settings/general/page.tsx (1)
75-78: Verify arbitrary value support formax-w-[calc(100vw-2rem)]Using
calc()inside an arbitrary value works only on Tailwind ≥ v3.3 with JIT enabled.
If the project is still on an earlier minor or hassafelistcompilation, this rule will be stripped and the pop-over might overflow on mobile.Please double-check the Tailwind version / build pipeline.
samrathreddy
changed the title
|
@samrathreddy I had raised a PR regarding the misalignment |
samrathreddy
changed the title
|
Conflicts please |
|
@MrgSub resolved 👍 |
|
conflicts & reopen please |
|
Hi @MrgSub , could you please reopen this PR? I’ve resolved the conflicts locally and can push the updates once it's reopened. This PR directly addresses and fixes the issue: https://feedback.0.email/p/mobile-settings-out-of-bounds. Thanks! |
3 participants
Description
In settings general section was not responsive. This PR fixes this issue.
Type of Change
Please delete options that are not relevant.
Areas Affected
Please check all that apply:
Testing Done
Describe the tests you've done:
Security Considerations
For changes involving data or authentication:
Checklist
Additional Notes
Add any other context about the pull request here.
Screenshots/Recordings
Before:
After:
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit
Summary by CodeRabbit