🐛 fix(nav): prevent long email addresses from overflowing container#850
🐛 fix(nav): prevent long email addresses from overflowing container#850devabdultech wants to merge 13 commits intoMail-0:stagingfrom
Conversation
Public Beta
Staging -> Main
chore: rm en copy from es
Refactor icon rendering in Categories component for cleaner code
|
@devabdultech is attempting to deploy a commit to the Zero Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe update modifies the user information display in the navigation sidebar component. It adjusts the layout and styling when the sidebar is not collapsed by making the container div use a full-width flex layout. The email display now enforces a maximum width, truncates overflowing text, and provides a tooltip with the full email address. No logic or control flow changes are introduced. Changes
Suggested reviewers
Poem
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
🧹 Nitpick comments (2)
apps/mail/components/ui/nav-user.tsx (2)
421-421: Avoid redundant spacing utilities.The container
<div>uses bothgap-1andspace-y-1for vertical spacing, which is redundant becausegap-1on aflex flex-colalready handles the space between items. Consider removing one (for example, dropspace-y-1) to keep the Tailwind classes concise and prevent unexpected double-spacing.
425-427: Enhance accessibility for truncated email.Using
max-w-[180px] truncatewith atitleattribute handles overflow visually. For better screen-reader support, add an explicitaria-label(e.g.,aria-label={activeAccount?.email || session.user.email}) or wrap the email in an<abbr>tag to ensure the full address is announced, not just the truncated text.
|
Why do we have the same thing committed twice in different PRs... #851 |
my bad. didn't checkout properly from this |
5 participants
Description
Fixed an issue where long email addresses were overflowing their container in the navigation sidebar user component. The solution adds proper width constraints to ensure emails are truncated with an ellipsis when they exceed available space. A tooltip is also provided via the title attribute for accessibility, allowing users to view the complete email address on hover.
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:
Checklist
Additional Notes
This fix resolves the UI issue shown in the screenshot where long email addresses were causing layout problems in the nav sidebar component.
Screenshots/Recordings
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit