Skip to content

fix(gui): prevent sidebar panel content clipping at narrow widths - #13084

Open
santhiprakash wants to merge 2 commits into
continuedev:mainfrom
santhiprakash:fix/sidebar-narrow-width
Open

fix(gui): prevent sidebar panel content clipping at narrow widths#13084
santhiprakash wants to merge 2 commits into
continuedev:mainfrom
santhiprakash:fix/sidebar-narrow-width

Conversation

@santhiprakash

Copy link
Copy Markdown

Problem

Fixes #13055.

In VS Code and VSCodium, when the Continue side panel is narrow, chat and onboarding content is cropped on the right edge instead of adapting to the available width. A commenter confirmed via DevTools that stacked layout padding (scrollbarGutter: stable both-edges plus horizontal padding) contributes to the clipping.

Triage / Root cause

Three layout rules sized content against the full viewport or reserved phantom gutter space instead of the sidebar webview panel:

  1. gui/src/pages/gui/index.tsx used w-screen (100vw) for the chat shell, which can exceed the webview panel width.
  2. gui/src/components/Layout.tsx set scrollbarGutter: "stable both-edges", reserving gutter space on both sides and eating horizontal space even when no scrollbar is visible.
  3. gui/src/components/StyledMarkdownPreview/index.tsx capped <pre> blocks at calc(100vw - 24px), again using viewport width instead of the panel container.

Fix

  • Replace w-screen with w-full and add min-w-0 on the shell and <main> so flex children can shrink within a narrow panel.
  • Change scrollbarGutter from "stable both-edges" to "stable".
  • Change markdown <pre> max-width from calc(100vw - 24px) to 100%.
  • Add a small layout regression test in gui/src/pages/gui/index.test.tsx.

Verification

  • Added gui/src/pages/gui/index.test.tsx (static source assertions for the layout contract).
  • Attempted npm install && npm test in gui/; blocked on this host by disk space (ENOSPC during install). Changes are CSS/layout only with no logic changes.

Notes / Risks

- Problem: In a narrow VS Code/VSCodium sidebar, chat/onboarding content was
  cropped on the right edge instead of fitting the available panel width.
- Fix: Use panel-relative width (w-full + min-w-0) instead of w-screen, drop
  scrollbarGutter both-edges phantom padding, and size markdown pre blocks to
  100% instead of 100vw.
- Verification: Added layout regression test; full gui vitest run blocked on
  this host by disk space (npm install ENOSPC).
@santhiprakash
santhiprakash requested a review from a team as a code owner August 4, 2026 03:55
@santhiprakash
santhiprakash requested review from sestinj and removed request for a team August 4, 2026 03:55
@santhiprakash

Copy link
Copy Markdown
Author

I have read the CLA Document and I hereby sign the CLA

@santhiprakash

Copy link
Copy Markdown
Author

CI note (scoped checks vs unrelated infra)

All checks tied to this PR's gui/ CSS/layout changes are green on the latest run (30884554938): gui-checks, vscode-checks, core-checks, e2e GUI.test.js, and related package checks.

Two unrelated jobs are red and block the aggregate require-all-checks-to-pass gate:

  1. jetbrains-testsAutocomplete > testAutocomplete() fails at Autocomplete.kt:42 (IntelliJ integration driver). This PR does not touch extensions/intellij/; the same failure reproduces on retry and appears on other recent PRs as well.
  2. build-and-upload-vsix (win32) — job was canceled (likely runner timeout).

Happy to retrigger if maintainers prefer, but I don't see a code fix in this lane for either failure. The sidebar width fix itself is verified by gui-checks and GUI e2e.

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.

Continue panel gets cropped/cut off in VSCodium sidebar

1 participant