fix: prevent action buttons clipping in composer footer at narrow widths#865
fix: prevent action buttons clipping in composer footer at narrow widths#865TheLevic wants to merge 2 commits intopingdotgg:mainfrom
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
github-actions
bot
added
the
vouch:unvouched
When the chat area is narrowed (e.g. sidebar open, narrow window), the
right-side action buttons ("Submit answers", "Implement" split button)
get clipped or pushed off-screen.
Root cause: the wide-mode left section had `sm:min-w-max` which forced
min-width: max-content, preventing it from shrinking. Combined with the
right section's shrink-0, the right section overflows and gets clipped.
- Remove `sm:min-w-max` and `sm:overflow-visible` from the wide-mode
left section so it respects `min-w-0 flex-1` at all widths
- Bump the wide-actions compact breakpoint from 720px to 800px so
compact mode triggers earlier when wide action buttons are present
TheLevic
force-pushed
the
fix/composer-footer-action-buttons-clipping
branch
from
02ebb4d to
38d3ca3
Compare
| }); | ||
|
|
||
| it("uses a higher breakpoint for wide action states", () => { | ||
| expect(COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PX).toBe(800); |
There was a problem hiding this comment.
Lol. Whoops. Didn't read the dumb test. Removed
2 participants
Summary
When the chat area is narrowed (sidebar open, narrow window), the right-side action buttons ("Submit answers", "Implement" split button) get clipped or pushed completely off-screen.
Root cause: In wide mode at
sm+(≥640px), the left section hadsm:min-w-maxwhich forcedmin-width: max-content, preventing it from shrinking. Combined with the right section'sshrink-0, the right section overflows and gets clipped by a parentoverflow-hidden.Changes
sm:min-w-maxandsm:overflow-visiblefrom the wide-mode left section inChatView.tsx— lets it shrink via its existingmin-w-0 flex-1to make room for action buttons. Theoverflow-x-autowith hidden scrollbar remains as a safety net.composerFooterLayout.ts— triggers compact mode slightly earlier when wide action buttons are present, reducing how much the left section needs to compress.Before
Submit Example
Implement Example
After
Submit Example
Implement Example
Note
Fix action button clipping in composer footer at narrow widths
sm:min-w-max sm:overflow-visiblefrom the non-compact action container in ChatView.tsx, keeping it horizontally scrollable with hidden scrollbars at all widths.COMPOSER_FOOTER_WIDE_ACTIONS_COMPACT_BREAKPOINT_PXfrom 720 to 800 in composerFooterLayout.ts, so the compact layout activates at a wider viewport.Macroscope summarized ff16239.