fix(gui): prevent sidebar panel content clipping at narrow widths - #13084
fix(gui): prevent sidebar panel content clipping at narrow widths#13084santhiprakash wants to merge 2 commits into
Conversation
- 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).
|
I have read the CLA Document and I hereby sign the CLA |
CI note (scoped checks vs unrelated infra)All checks tied to this PR's Two unrelated jobs are red and block the aggregate
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. |
|
Update: requested review from @sestinj. The PR remains mergeable but is blocked by two unrelated CI issues:
All scope-relevant checks ( |
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-edgesplus 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:
gui/src/pages/gui/index.tsxusedw-screen(100vw) for the chat shell, which can exceed the webview panel width.gui/src/components/Layout.tsxsetscrollbarGutter: "stable both-edges", reserving gutter space on both sides and eating horizontal space even when no scrollbar is visible.gui/src/components/StyledMarkdownPreview/index.tsxcapped<pre>blocks atcalc(100vw - 24px), again using viewport width instead of the panel container.Fix
w-screenwithw-fulland addmin-w-0on the shell and<main>so flex children can shrink within a narrow panel.scrollbarGutterfrom"stable both-edges"to"stable".<pre>max-widthfromcalc(100vw - 24px)to100%.gui/src/pages/gui/index.test.tsx.Verification
gui/src/pages/gui/index.test.tsx(static source assertions for the layout contract).npx vitest run src/pages/gui/index.test.tsxpasses.npx eslint src/pages/gui/index.tsx src/pages/gui/index.test.tsx src/components/Layout.tsx src/components/StyledMarkdownPreview/index.tsxpasses.npm run tsc:checkandnpx vite buildingui/are blocked on this host unless the fullcoreworkspace dependencies are installed, which require a large install includingpuppeteer. The changes are CSS/layout only with no logic changes.Model Disclosure
This pull request contains AI-generated code changes produced by Cognition Devin (an AI coding assistant) and reviewed before submission.
Notes / Risks
w-screenon the shell. This PR is scoped specifically to Continue panel gets cropped/cut off in VSCodium sidebar #13055 withw-fullas the width fix.I have read the CLA Document and I hereby sign the CLA.