Skip to content

fix(gui): prevent Accept/Reject buttons from being clipped in narrow sidebar - #13131

Open
thanhnnict wants to merge 1 commit into
continuedev:mainfrom
thanhnnict:fix/toolbar-button-overflow
Open

fix(gui): prevent Accept/Reject buttons from being clipped in narrow sidebar#13131
thanhnnict wants to merge 1 commit into
continuedev:mainfrom
thanhnnict:fix/toolbar-button-overflow

Conversation

@thanhnnict

Copy link
Copy Markdown

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

  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

Testing

  • Tested with narrow sidebar (~300px) — buttons always visible
  • Extended chat sessions with multiple terminal outputs — no overflow
  • Code blocks render with horizontal scroll inside their container (no layout push)

Changed Files

File Change
PendingToolCallToolbar.tsx flex → grid layout
Lump/index.tsx Add min-w-0, overflow-hidden
StyledMarkdownPreview/index.tsx calc(100vw-24px)100%
UnifiedTerminal.tsx calc(100vw-24px)100%
Chat.tsx StepsDiv overflow-x: hidden
gui/index.tsx Main min-w-0

…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.
@thanhnnict
thanhnnict requested a review from a team as a code owner August 14, 2026 02:16
@thanhnnict
thanhnnict requested review from sestinj and removed request for a team August 14, 2026 02:16
@thanhnnict

Copy link
Copy Markdown
Author

Hi maintainers,

The only failing check is jetbrains-tests which appears unrelated to this change — this PR only modifies GUI components (CSS layout in PendingToolCallToolbar, StyledMarkdownPreview, UnifiedTerminal, Chat.tsx, and Lump).

All other 46 checks pass, including gui-checks, core-checks, prettier-check, lint, all e2e tests, and all platform builds.

Could you re-run the JetBrains tests or confirm if this is a known flaky test? Thanks!

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.

1 participant