fix: alignment of inputs in settings/general#1725
Conversation
WalkthroughThis update revises the responsive layout and styling of form controls on the general settings page. Fixed width classes are removed in favor of flexible and container-based width constraints, and label typography is standardized. No changes are made to logic, event handling, or exported entities. Changes
Sequence Diagram(s)Possibly related PRs
Suggested reviewers
Poem
✨ 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.
Greptile Summary
This PR addresses alignment issues in the General Settings page form inputs. The changes primarily focus on standardizing input widths and improving responsive behavior:
- Mobile views now use full-width inputs (
w-full) - Desktop views have fixed widths (200px-280px) for better visual consistency
- Standardized text styling for form labels with consistent font weights and spacing
- Improved hover states and layout structures
The changes make the form more visually consistent and improve usability, especially on mobile devices. The improvements are clearly demonstrated in the before/after screenshots provided.
Confidence score: 5/5
- This PR is very safe to merge as it only contains styling changes to form elements
- The changes are well-contained within the general settings page and don't affect any functional logic
- No files need special attention as the changes are straightforward CSS modifications
1 file reviewed, no comments
Edit PR Review Bot Settings | Greptile
![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)
60-66: Addtype="button"to prevent accidental form submissionThe
Buttonacting as the pop-up trigger sits inside the<form id="general-form">.
Without an explicittype, HTML buttons default tosubmit, so clicking the timezone selector would POST the whole settings form unintentionally.-<Button - variant="outline" - role="combobox" - aria-expanded={open} - className="flex !h-9 w-full items-center justify-start rounded-md hover:bg-transparent" +<Button + type="button" // avoid implicit submit + variant="outline" + role="combobox" + aria-expanded={open} + className="flex !h-9 w-full items-center justify-start rounded-md hover:bg-transparent"
🧹 Nitpick comments (1)
apps/mail/app/(routes)/settings/general/page.tsx (1)
199-206: Consider DRYing up repeated arbitrary-width utilities
md:w-[200px]andmd:w-[280px]appear in several places.
If more inputs adopt the same sizes, maintaining scattered magic numbers becomes brittle. A small extracted CSS utility (e.g..form-col-sm,.form-col-lg) or a Tailwind theme extension would centralize the constraint and simplify future tweaks.Also applies to: 223-226, 234-249
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/mail/app/(routes)/settings/general/page.tsx(5 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.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.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: cubic · AI code reviewer
🔇 Additional comments (1)
apps/mail/app/(routes)/settings/general/page.tsx (1)
199-206: Visual width tweaks look good & consistentMoving the fixed widths from the inner
SelectTrigger/Buttonto the surroundingFormItemkeeps controls full-width on small screens while preserving predictable alignment formdand up. Nice, tidy change.Also applies to: 223-226, 234-249
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
There was a problem hiding this comment.
cubic reviewed 1 file and found no issues. Review PR in cubic.dev.
2 participants
bad
good
Summary by cubic
Fixed alignment and sizing of input fields in the General Settings page for a cleaner, more consistent layout.
Summary by CodeRabbit