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

[thanhnnict]

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

[thanhnnict]

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!

[thanhnnict]

Hi @sestinj,

Following up on this PR — it's been 1 week since creation. The only failing check is jetbrains-tests which is a known flaky test in the upstream CI.

All other 47 checks pass, including:

• ✅ core-checks
• ✅ gui-checks
• ✅ All e2e tests
• ✅ All platform builds
• ✅ prettier-check, lint, security checks

This is a pure CSS/Tailwind fix (no logic changes) that prevents Accept/Reject buttons from being clipped in narrow sidebar. The fix uses CSS Grid instead of flexbox and container-relative widths instead of viewport-relative.

Thanks for your time!

[thanhnnict]

Hi @sestinj,

I've created issue #13219 to document this bug more clearly. The issue is very user-facing — when the sidebar is narrow, users cannot approve/reject tool calls because the buttons are clipped.

This is a pure CSS/Tailwind fix (no logic changes) that should be easy to review and merge. All 47/48 CI checks pass (only jetbrains-tests flaky upstream).

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

[thanhnnict]

/rerun

The only failing check is jetbrains-tests which is a flaky UI integration test (Kotlin ), completely unrelated to this CSS-only change.

Evidence it's flaky — same commit produced different results across runs:

• ❌ Run 31763205205 (02:26): FAILURE
• ✅ Run 33824346191 (01:04): SUCCESS
• ✅ Run 33824444116 (01:06): SUCCESS

This PR only modifies 6 VS Code GUI files (CSS/Tailwind). The failing test is a JetBrains plugin autocomplete test that doesn't touch any of these files.

Could you re-run the failed JetBrains test? Thanks!