Skip to content

Comments

frontend: Settings: Adjust misalignments of placeholders#1531

Merged
MrgSub merged 2 commits intoMail-0:stagingfrom
SinghaAnirban005:bug/general
Jul 4, 2025
Merged

frontend: Settings: Adjust misalignments of placeholders#1531
MrgSub merged 2 commits intoMail-0:stagingfrom
SinghaAnirban005:bug/general

Conversation

@SinghaAnirban005
Copy link
Contributor

@SinghaAnirban005 SinghaAnirban005 commented Jun 28, 2025

Description

This PR fixes the alignment of the "default email alias" placeholder under Settings/General

fixes #1530


Type of Change

Please delete options that are not relevant.

  • 🐛 Bug fix (non-breaking change which fixes an issue)
  • 🎨 UI/UX improvement

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

Screenshots/Recordings

Screenshot from 2025-06-28 22-55-22


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

Summary by CodeRabbit

  • Style
    • Updated the size of the info icon in the tooltip to scale relative to the font size for better consistency with surrounding text.
    • Improved the layout of language and timezone form labels for enhanced alignment and readability.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Jun 28, 2025

Walkthrough

The change updates the CSS classes for the InfoIcon component within the tooltip of the "Default Email Alias" label in the settings page. The icon's size is now set relative to the font size using em units instead of fixed pixel values, ensuring alignment consistency with surrounding elements. Additionally, flex class is added to the form labels for the "language" and "timezone" fields to adjust their layout.

Changes

File(s) Change Summary
apps/mail/app/(routes)/settings/general/page.tsx Added flex class to FormLabel components for "language" and "timezone" fields; changed InfoIcon sizing from fixed pixels (h-4 w-4) to relative units (h-[1em] w-[1em]) for consistent alignment.

Sequence Diagram(s)

Assessment against linked issues

Objective Addressed Explanation
Fix misalignment of Default Email Alias placeholder in Settings → General section (#1530)

Assessment against linked issues: Out-of-scope changes

Suggested labels

Low Priority

Poem

A nibble of code, a tweak so small,
The icon now stands proud and tall.
No more misaligned, it fits just right,
Bringing harmony to the UI’s light.
A bunny hops with glee,
For pixel-perfect symmetry! 🐇✨


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eab7c4b and 3ed31bb.

📒 Files selected for processing (1)
  • apps/mail/app/(routes)/settings/general/page.tsx (3 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • apps/mail/app/(routes)/settings/general/page.tsx
✨ Finishing Touches
  • 📝 Generate Docstrings

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
🪧 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.
    • Explain this complex logic.
    • 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. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • 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 src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

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

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

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

Documentation and Community

  • 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (2)
apps/mail/app/(routes)/settings/general/page.tsx (2)

210-212: Consider centering the label’s inline content explicitly

className="flex" switches the label’s display to flexbox but leaves align-items at the default stretch.
If the text (or future inline elements) ends up taller than the parent, mis-vertical-alignment can re-appear. Guard against that now:

-<FormLabel className="flex">
+<FormLabel className="flex items-center">

A tiny tweak, but it future-proofs the layout.


234-236: Same centering concern applies here

Replicate the items-center addition for consistency with the language field and to ensure both labels align identically:

-<FormLabel className="flex">
+<FormLabel className="flex items-center">
📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 59c18be and 1aed17e.

📒 Files selected for processing (1)
  • apps/mail/app/(routes)/settings/general/page.tsx (3 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: danteissaias
PR: Mail-0/Zero#902
File: apps/mail/components/connection/add.tsx:77-77
Timestamp: 2025-05-07T16:55:46.513Z
Learning: For the "Upgrade" link in AddConnectionDialog, using a proper <button> element instead of a <span> with onClick is recognized as an accessibility improvement but was deferred as out of scope in PR #902 (CSS variables PR).
apps/mail/app/(routes)/settings/general/page.tsx (1)
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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

♻️ Duplicate comments (1)
apps/mail/locales/pl.json (1)

363-363: Consider translating "Live Support" to Polish.

Similar to other locale files, "Live Support" remains in English. If this should be localized, consider translating it to Polish (e.g., "Wsparcie na żywo").

🧹 Nitpick comments (1)
apps/mail/locales/es.json (1)

363-363: Consider translating "Live Support" to Spanish.

The value "Live Support" remains in English within the Spanish locale file. If this is a brand term that should stay in English across all locales, this is correct. Otherwise, consider translating it to Spanish (e.g., "Soporte en Vivo").

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1aed17e and 86b1a5a.

📒 Files selected for processing (23)
  • apps/mail/components/ui/nav-main.tsx (2 hunks)
  • apps/mail/locales/ar.json (1 hunks)
  • apps/mail/locales/ca.json (1 hunks)
  • apps/mail/locales/cs.json (1 hunks)
  • apps/mail/locales/de.json (1 hunks)
  • apps/mail/locales/en.json (1 hunks)
  • apps/mail/locales/es.json (1 hunks)
  • apps/mail/locales/fa.json (1 hunks)
  • apps/mail/locales/fr.json (1 hunks)
  • apps/mail/locales/hi.json (1 hunks)
  • apps/mail/locales/hu.json (1 hunks)
  • apps/mail/locales/ja.json (1 hunks)
  • apps/mail/locales/ko.json (1 hunks)
  • apps/mail/locales/lv.json (1 hunks)
  • apps/mail/locales/nl.json (1 hunks)
  • apps/mail/locales/pl.json (1 hunks)
  • apps/mail/locales/pt.json (1 hunks)
  • apps/mail/locales/ru.json (1 hunks)
  • apps/mail/locales/tr.json (1 hunks)
  • apps/mail/locales/vi.json (1 hunks)
  • apps/mail/locales/zh_CN.json (1 hunks)
  • apps/mail/locales/zh_TW.json (1 hunks)
  • package.json (1 hunks)
✅ Files skipped from review due to trivial changes (19)
  • apps/mail/locales/nl.json
  • apps/mail/locales/tr.json
  • apps/mail/locales/de.json
  • apps/mail/locales/fa.json
  • apps/mail/locales/zh_CN.json
  • apps/mail/locales/pt.json
  • apps/mail/locales/cs.json
  • apps/mail/locales/ca.json
  • apps/mail/locales/hu.json
  • apps/mail/locales/ja.json
  • apps/mail/locales/fr.json
  • apps/mail/locales/ru.json
  • apps/mail/locales/ko.json
  • apps/mail/locales/lv.json
  • apps/mail/locales/zh_TW.json
  • apps/mail/locales/en.json
  • apps/mail/locales/vi.json
  • apps/mail/locales/hi.json
  • apps/mail/locales/ar.json
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: danteissaias
PR: Mail-0/Zero#902
File: apps/mail/components/connection/add.tsx:77-77
Timestamp: 2025-05-07T16:55:46.513Z
Learning: For the "Upgrade" link in AddConnectionDialog, using a proper <button> element instead of a <span> with onClick is recognized as an accessibility improvement but was deferred as out of scope in PR #902 (CSS variables PR).
package.json (1)
Learnt from: adiologydev
PR: Mail-0/Zero#871
File: docker-compose.yaml:36-46
Timestamp: 2025-05-04T20:00:52.180Z
Learning: The project uses a monorepo structure where Docker builds require the root context to access files throughout the repository. Changing build contexts for services like migrations would require significant restructuring.
🔇 Additional comments (4)
apps/mail/locales/es.json (1)

363-363: Verify this change aligns with the PR objectives.

The PR is described as fixing "misalignments of placeholders" in Settings/General, but this change adds a navigation localization string. Please confirm this change belongs in this PR.

Likely an incorrect or invalid review comment.

package.json (1)

22-22: Verify this change belongs in this PR.

This Docker command change appears unrelated to the stated PR objectives about fixing placeholder alignment issues in Settings/General.

Likely an incorrect or invalid review comment.

apps/mail/components/ui/nav-main.tsx (2)

193-196: LGTM! Proper internationalization implementation.

The replacement of hardcoded "Live Support" text with the localized string using t('navigation.sidebar.livesupport') follows the correct internationalization pattern.


193-196: Verify this change aligns with the PR objectives.

This internationalization change appears unrelated to the stated PR objectives about fixing "misalignments of placeholders" in Settings/General. Please confirm this change belongs in this PR.

Likely an incorrect or invalid review comment.

@SinghaAnirban005
Copy link
Contributor Author

@MrgSub @ahmetskilinc
Kindly review this small PR
Thank You

@MrgSub MrgSub merged commit 4da17dd into Mail-0:staging Jul 4, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Misalignment of Default Email Alias placeholder in Settings → General section

2 participants