fix: email composer bottom actions fixed#1437
Conversation
WalkthroughThis change updates the flexbox layout and CSS classes of the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant EmailComposer
User->>EmailComposer: Open or interact with composer
EmailComposer->>EmailComposer: Render with updated flex layout
Note right of EmailComposer: Adjusts container sizing and scrolling via CSS
Possibly related PRs
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 (
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/mail/components/create/email-composer.tsx (1)
585-588: Consider using responsive units instead of fixed 500px max-height
Hardcodingmax-h-[500px]may not adapt well to different viewport heights. Consider using relative units (e.g.,max-h-[80vh]) or a design token to ensure the composer scales gracefully across devices.Apply this diff if you want to switch to a viewport-based limit:
- 'flex max-h-[500px] w-full max-w-[750px] flex-col overflow-hidden rounded-2xl bg-[#FAFAFA] shadow-sm dark:bg-[#202020]', + 'flex max-h-[80vh] w-full max-w-[750px] flex-col overflow-hidden rounded-2xl bg-[#FAFAFA] shadow-sm dark:bg-[#202020]',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/mail/components/create/email-composer.tsx(3 hunks)
🔇 Additional comments (3)
apps/mail/components/create/email-composer.tsx (3)
590-590:min-h-0addition is correct for flex overflow
The newmin-h-0on the scrollable container ensures the flex child can shrink and enable scrolling inside its parent. This aligns with best practices for flex layouts.
1159-1159: Message section now flexibly fills and scrolls
Switching toflex-1 overflow-y-autowithout a fixed height constraint lets the editor expand and scroll correctly within the layout.
1176-1176: Prevent bottom bar from shrinking under flex growth
Addingshrink-0guarantees the action bar retains its height when the content area grows, keeping the controls always accessible.
Implements #1352
READ CAREFULLY THEN REMOVE
Remove bullet points that are not relevant.
PLEASE REFRAIN FROM USING AI TO WRITE YOUR CODE AND PR DESCRIPTION. IF YOU DO USE AI TO WRITE YOUR CODE PLEASE PROVIDE A DESCRIPTION AND REVIEW IT CAREFULLY. MAKE SURE YOU UNDERSTAND THE CODE YOU ARE SUBMITTING USING AI.
Description
Fixed the layout of email composer bottom actions section which breaks when the email content exceed 500 px.
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
Now:
Earlier:
By submitting this pull request, I confirm that my contribution is made under the terms of the project's license.
Summary by CodeRabbit