Fix: settings general mobile responsiveness#1653
Fix: settings general mobile responsiveness#1653samrathreddy wants to merge 4 commits intoMail-0:stagingfrom
Conversation
…github.com/samrathreddy/Zero into fix/settings-general-mobile-responsiveness
WalkthroughThe changes update the UI layout and styling of the general settings page in the mail app. Adjustments focus on improving responsiveness and spacing for various form fields, including language, timezone, and email alias selectors, as well as switches, specifically enhancing display on smaller screens. Additionally, minor padding and height adjustments are made in mail list components and the mail layout container height is increased by 49 pixels. No logic or exported entities are modified. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SettingsPage
participant UIComponents
User->>SettingsPage: Navigate to General Settings
SettingsPage->>UIComponents: Render form fields (Language, Timezone, Email Alias, Switches)
UIComponents-->>SettingsPage: Display responsive layout based on screen size
SettingsPage-->>User: Show updated, responsive settings form
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (2)
✨ 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 (
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
PR Summary
Enhanced mobile responsiveness in the general settings page with improved layout adaptations and component spacing.
- Converted flex row layouts to columns on mobile screens in
apps/mail/app/(routes)/settings/general/page.tsx - Optimized form element widths with responsive classes for better mobile display
- Improved spacing and alignment of settings components for smaller screens
- Added before/after screenshots demonstrating significant improvement in mobile layout
- Reopened and resolved merge conflicts from previous PR #1557
1 file reviewed, 1 comment
Edit PR Review Bot Settings | Greptile
| </PopoverTrigger> | ||
| <PopoverContent className="w-[300px] p-0" align="start"> | ||
| <div className="px-3 py-2"> | ||
| <PopoverContent className="w-[300px] p-0 max-w-[calc(100vw-2rem)] md:max-w-none"> |
There was a problem hiding this comment.
style: Add z-index to prevent PopoverContent from being cut off on mobile devices when keyboard is open
samrathreddy
changed the title
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/mail/app/(routes)/settings/general/page.tsx (1)
234-234: Consider removing the!importantflag.The
!mb-1class uses the important flag to override existing styles. This could make the CSS harder to maintain and debug. Consider addressing the root cause of the margin conflict instead.-<FormLabel className="!mb-1 flex items-center gap-1"> +<FormLabel className="mb-1 flex items-center gap-1">If this change breaks the layout, investigate and fix the underlying CSS specificity issue.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/mail/app/(routes)/settings/general/page.tsx(7 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: retrogtx
PR: Mail-0/Zero#1468
File: apps/server/src/trpc/routes/mail.ts:331-331
Timestamp: 2025-06-28T03:56:09.376Z
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.
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.376Z
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.
🧬 Code Graph Analysis (1)
apps/mail/app/(routes)/settings/general/page.tsx (6)
apps/mail/components/icons/icons.tsx (1)
Clock(1615-1630)apps/mail/components/ui/button.tsx (1)
Button(71-71)apps/mail/components/ui/scroll-area.tsx (1)
ScrollArea(50-50)apps/mail/components/ui/select.tsx (1)
SelectTrigger(140-140)apps/mail/components/ui/tooltip.tsx (2)
Tooltip(72-72)TooltipTrigger(72-72)apps/mail/components/ui/switch.tsx (1)
Switch(27-27)
🔇 Additional comments (9)
apps/mail/app/(routes)/settings/general/page.tsx (9)
71-72: Good responsive width constraints for mobile.The popover content now properly constrains its width on mobile devices using
max-w-[calc(100vw-2rem)]while maintaining the fixed width on larger screens. The padding adjustment also helps with mobile spacing.
193-193: Excellent responsive layout implementation.The form layout now properly stacks vertically on mobile (
flex-col) and horizontally on medium screens (md:flex-row). The alignment and gap adjustments ensure proper spacing across different screen sizes.
202-202: Consistent responsive select trigger width.The SelectTrigger now uses full width on mobile (
w-full) and fixed width on medium screens (md:w-36), maintaining consistency with the TimezoneSelect component's responsive behavior.
238-238: Good spacing adjustment for the info icon.The icon margin has been properly adjusted to work with the new flex layout and gap spacing.
279-279: Excellent responsive switch layout.The FormItem now properly stacks vertically on mobile (
flex-col) and horizontally on small screens and up (sm:flex-row). The gap spacing and alignment adjustments ensure good UX across different screen sizes.
287-291: Good responsive switch alignment.The Switch component now has proper margin adjustments (
mt-1 sm:mt-0) to align correctly in both vertical and horizontal layouts. The formatting is also clean and consistent.
300-300: Consistent responsive pattern for autoRead switch.The autoRead switch follows the same responsive pattern as the zeroSignature switch, ensuring UI consistency across the form.
308-312: Consistent switch component styling.The autoRead Switch component maintains the same responsive margin adjustments as the zeroSignature Switch, ensuring consistent behavior and appearance.
80-80: Verify timezone selection ScrollArea height for UXEnsure reducing the ScrollArea height from 300px to 250px does not negatively affect browsing through a long list of timezones, especially on smaller screens.
• Location: apps/mail/app/(routes)/settings/general/page.tsx, around line 80
• Action: Manually test the timezone selector on desktop and mobile breakpoints to confirm users can comfortably scroll through all options without excessive clipping.
samrathreddy
force-pushed
the
fix/settings-general-mobile-responsiveness
branch
from
e5d8a98 to
982c91e
Compare
|
conflicts and re-open please |
2 participants
Description
Reopening #1557 after resolving merge conflicts
In settings general section was not responsive. This PR fixes this issue.
Issue: https://0email.featurebase.app/p/mobile-settings-out-of-bounds
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