Bug: Accept/Reject buttons clipped in narrow sidebar (GUI layout overflow)

[thanhnnict]

Bug Description

When the VS Code sidebar panel is narrow (~300px) or after extended chat sessions with many code blocks and terminal outputs, the Accept/Reject buttons in PendingToolCallToolbar are clipped (partially or fully hidden).

This makes it impossible for users to approve or reject tool calls, blocking the conversation flow.

Root Cause

1. Flexbox with shrink-0 — buttons cannot shrink and are pushed outside visible area
2. Viewport-relative max-width — calc(100vw - 24px) uses viewport width (e.g., 1920px) instead of container width (e.g., 300px sidebar)
3. Missing shrink constraints — flex hierarchy lacks min-w-0 at critical points

Fix

PR #13131 fixes this by:

• Switching toolbar from flexbox to CSS Grid (grid-cols-[minmax(0,1fr)_auto])
• Replacing calc(100vw - 24px) with container-relative 100%
• Adding min-w-0 and overflow-hidden throughout the chat UI hierarchy

Impact

• Before: Buttons clipped in narrow sidebar, users cannot approve/reject tool calls
• After: Buttons always visible, consistent layout containment

Reproduction

1. Open Continue sidebar in VS Code
2. Resize sidebar to minimum width (~300px)
3. Trigger a tool call (e.g., ask to edit a file)
4. Observe: Accept/Reject buttons are clipped

Related

• PR: fix(gui): prevent Accept/Reject buttons from being clipped in narrow sidebar #13131 (fix ready for review)
• Pure CSS/Tailwind fix, no logic changes
• All 47/48 CI checks pass (only jetbrains-tests flaky upstream)

[thanhnnict]

Hi @sestinj,

Ping on this issue — it's a very user-facing bug that blocks the conversation flow. Users cannot approve/reject tool calls when the sidebar is narrow.

PR #13131 is ready for review:

• Pure CSS/Tailwind fix (no logic changes)
• All 47/48 CI checks pass (only jetbrains-tests flaky upstream)
• Easy to review and merge

Could you take a look when you have a chance? Thanks!