fix(gui): prevent sidebar panel content clipping at narrow widths - #13084
Open
santhiprakash wants to merge 2 commits into
Open
fix(gui): prevent sidebar panel content clipping at narrow widths#13084santhiprakash wants to merge 2 commits into
santhiprakash 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).
Author
|
I have read the CLA Document and I hereby sign the CLA |
Author
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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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).npm install && npm testingui/; blocked on this host by disk space (ENOSPCduring install). Changes are CSS/layout only with no logic changes.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.