fix(gui): prevent Accept/Reject buttons from being clipped in narrow sidebar - #13131
Open
thanhnnict wants to merge 1 commit into
Open
fix(gui): prevent Accept/Reject buttons from being clipped in narrow sidebar#13131thanhnnict wants to merge 1 commit into
thanhnnict wants to merge 1 commit into
Conversation
…sidebar The PendingToolCallToolbar buttons (Accept/Reject) were being clipped when the sidebar panel was narrow or after extended chat sessions with many code blocks/terminal outputs. Root causes: 1. Toolbar used flexbox with shrink-0 on buttons container, causing overflow when panel width was insufficient 2. Pre elements used max-width: calc(100vw - 24px) which could expand content beyond the sidebar container width, pushing the entire layout outside the overflow-x: hidden boundary Fix: - Switch toolbar row from flexbox to CSS Grid (grid-cols-[minmax(0,1fr)_auto]) ensuring buttons always receive their intrinsic width - Replace viewport-relative max-width with container-relative (100%) for pre elements in both StyledMarkdownPreview and UnifiedTerminal - Add overflow-x: hidden on StepsDiv to contain chat content - Add min-w-0 on flex containers to allow proper shrinking Tested with narrow sidebar (~300px) and extended chat sessions with multiple terminal outputs.
Author
|
Hi maintainers, The only failing check is All other 46 checks pass, including Could you re-run the JetBrains tests or confirm if this is a known flaky test? Thanks! |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The PendingToolCallToolbar buttons (Accept/Reject) are clipped when the sidebar panel is narrow or after extended chat sessions with many code blocks/terminal outputs.
Root Causes
shrink-0on buttons container, causing overflow when panel width was insufficientmax-width: calc(100vw - 24px)which could expand content beyond the sidebar container width, pushing the entire layout outside theoverflow-x: hiddenboundaryFix
grid-cols-[minmax(0,1fr)_auto]) ensuring buttons always receive their intrinsic width100%) for pre elements in both StyledMarkdownPreview and UnifiedTerminaloverflow-x: hiddenon StepsDiv to contain chat contentmin-w-0on flex containers to allow proper shrinkingTesting
Changed Files
PendingToolCallToolbar.tsxLump/index.tsxmin-w-0,overflow-hiddenStyledMarkdownPreview/index.tsxcalc(100vw-24px)→100%UnifiedTerminal.tsxcalc(100vw-24px)→100%Chat.tsxoverflow-x: hiddengui/index.tsxmin-w-0