fix: alignment issue of timezone select field

[eersnington]

Description

Please provide a clear description of your changes.

Fixed an alignment issue with Timezone select field in Settings > General tab. The timezone field was a few pixels lower compared to the Language and Default Email Alias select field triggers. I added "self-start" class which keeps the timezone field aligned at the top with the other 2 fields, and prevents vertical misalignment that occurs when the parent container's items-center class centers all fields regardless of their individual heights.

---

Type of Change

Please delete options that are not relevant.

• 🐛 Bug fix (non-breaking change which fixes an issue)

Areas Affected

Please check all that apply:

• Email Integration (Gmail, IMAP, etc.)
• User Interface/Experience
• Authentication/Authorization
• Data Storage/Management
• API Endpoints
• Documentation
• Testing Infrastructure
• Development Workflow
• Deployment/Infrastructure

Testing Done

Describe the tests you've done:

• Unit tests added/updated
• Integration tests added/updated
• Manual testing performed
• Cross-browser testing (if UI changes)
• Mobile responsiveness verified (if UI changes)

Security Considerations

For changes involving data or authentication:

• No sensitive data is exposed
• Authentication checks are in place
• Input validation is implemented
• Rate limiting is considered (if applicable)

Checklist

• I have read the CONTRIBUTING document
• My code follows the project's style guidelines
• I have performed a self-review of my code
• I have commented my code, particularly in complex areas
• I have updated the documentation
• My changes generate no new warnings
• I have added tests that prove my fix/feature works
• All tests pass locally
• Any dependent changes are merged and published

Additional Notes

Add any other context about the pull request here.

Screenshots/Recordings

Before (Live in Prod):

After:

---

By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.

---

Summary by cubic

Fixes the Timezone select alignment in Settings → General. Adds self-start to its FormItem so it top-aligns with Language and Default Email Alias, removing the drop caused by the parent’s items-center.

Summary by CodeRabbit

• Style
  • Improved layout of the Timezone field in Settings → General. On medium and larger screens, the control now top-aligns within its section, providing more consistent spacing with neighboring fields and reducing awkward vertical centering. This refinement enhances readability and quick scanning within the form. No functional behavior or data handling was changed.

[coderabbitai]

Walkthrough

A single UI className change in apps/mail/app/(routes)/settings/general/page.tsx adds "self-start" to a FormItem wrapper within renderTimezoneField. No logic, data flow, or exported API changes.

Changes

Cohort / File(s)	Change Summary
UI alignment tweak apps/mail/app/(routes)/settings/general/page.tsx	Updated FormItem wrapper className from "w-full md:w-[200px]" to "w-full md:w-[200px] self-start" to adjust alignment in renderTimezoneField.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Possibly related PRs

• fix: alignment of inputs in settings/general #1725 — Also adjusts FormItem/selector wrapper classes in the same file for alignment; closely related styling context.
• frontend: Settings: Adjust misalignments of placeholders #1531 — Similar layout className tweaks in the same page (timezone/language alignment).

Suggested labels

design

Suggested reviewers

• MrgSub

Poem

Tiny nudge, stellar gain, UI aligned just right ✨
One small class for code, one giant leap for sight.
Pixels launch to self-start, cruising smooth and tight—
Minimal thrust applied, perfect orbit in our night.
Ship it. 🚀

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 9365ef2 and a9b57ec.

📒 Files selected for processing (1)

• apps/mail/app/(routes)/settings/general/page.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (4)

**/*.{css,js,ts,jsx,tsx,mdx}

📄 CodeRabbit inference engine (.cursor/rules/tailwind-css-v4.mdc)

**/*.{css,js,ts,jsx,tsx,mdx}: Chain variants together for composable variants (e.g., group-has-data-potato:opacity-100).
Use new variants such as starting, not-*, inert, nth-*, in-*, open (for :popover-open), and ** for all descendants.
Do not use deprecated utilities like bg-opacity-*, text-opacity-*, border-opacity-*, and divide-opacity-*; use the new syntax (e.g., bg-black/50).
Use renamed utilities: shadow-sm is now shadow-xs, shadow is now shadow-sm, drop-shadow-sm is now drop-shadow-xs, drop-shadow is now drop-shadow-sm, blur-sm is now blur-xs, blur is now blur-sm, rounded-sm is now rounded-xs, rounded is now rounded-sm, outline-none is now outline-hidden.
Use bg-(--brand-color) syntax for CSS variables in arbitrary values instead of bg-[--brand-color].
Stacked variants now apply left-to-right instead of right-to-left.

Files:

• apps/mail/app/(routes)/settings/general/page.tsx

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (AGENT.md)

**/*.{js,jsx,ts,tsx}: Use 2-space indentation
Use single quotes
Limit lines to 100 characters
Semicolons are required

Files:

• apps/mail/app/(routes)/settings/general/page.tsx

**/*.{js,jsx,ts,tsx,css}

📄 CodeRabbit inference engine (AGENT.md)

Use Prettier with sort-imports and Tailwind plugins

Files:

• apps/mail/app/(routes)/settings/general/page.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENT.md)

Enable TypeScript strict mode

Files:

• apps/mail/app/(routes)/settings/general/page.tsx

🧠 Learnings (1)

📓 Common learnings

Learnt from: retrogtx
PR: Mail-0/Zero#1983
File: apps/mail/components/ui/calendar.tsx:16-16
Timestamp: 2025-08-11T16:08:40.120Z
Learning: The calendar component in `apps/mail/components/ui/calendar.tsx` is used for email scheduling in Zero mail app, which is a future-only operation. Past years in the year range are unnecessary since users cannot schedule emails to be sent in the past.

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.

⏰ 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)

226-231: Alignment fix is precise and correct.

Adding self-start on the timezone item cleanly overrides the parent md:items-center (see Line 335) to top-align just this control. Surgical, minimal blast radius. Ship it.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[cubic-dev-ai]

No issues found across 1 file