fix(gui): prevent horizontal overflow and content clipping in chat webview panel

[Cookie-CoDeRR]

Description

Fixes #12910

Three related layout bugs were causing content to overflow or get clipped
on the right edge of the VS Code sidebar panel:

1. Layout.tsx — Phantom padding from scrollbarGutter: "stable both-edges"
The both-edges keyword reserves gutter space on both sides of the scroll
container, silently eating ~8px on the right and clipping chat content even
without a scrollbar. Changed to "stable".

2. StyledMarkdownPreview/index.tsx — Code blocks sized to wrong viewport
max-width: calc(100vw - 24px) uses the full screen width, not the panel width.
In a VS Code webview sidebar, this causes <pre> blocks to overflow their
container. Changed to max-width: 100%.

3. TipTapEditor — Long unbroken text overflows input box
Typing a long string with no spaces caused the TipTap editor to expand
horizontally beyond the panel. Added word-break: break-word,
overflow-wrap: anywhere, and overflow-x: hidden to the editor and its wrapper.

Checklist

• I've read the contributing guide
• The relevant docs, if any, have been updated or created
• The relevant tests, if any, have been updated or created

Tests

Pure CSS/layout fixes — no logic changes. Manually verified by running
the extension in debug mode (F5) on macOS (darwin-arm64).

[github-actions]

All contributors have signed the CLA ✍️ ✅
_{Posted by the CLA Assistant Lite bot.}

[Cookie-CoDeRR]

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

[Copilot]

🟡 Not ready to approve

The new TipTap overflow/wrapping CSS targets a .tiptap selector that doesn’t match the actual editor element class (ProseMirror), so the intended fix likely won’t apply.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

Pull request overview

This PR addresses multiple UI layout issues in the VS Code sidebar chat webview that caused horizontal overflow and right-edge content clipping, primarily around code blocks and the main input editor.

Changes:

• Adjusted the main layout container’s scrollbarGutter behavior to avoid reserving space on both sides.
• Updated markdown <pre> styling to size relative to its container instead of the viewport to prevent sidebar overflow.
• Added new overflow/wrapping constraints intended to prevent the TipTap editor/input from expanding horizontally.

File summaries

File	Description
gui/src/components/StyledMarkdownPreview/index.tsx	Constrains <pre> to container width to reduce markdown code-block overflow in the sidebar.
gui/src/components/mainInput/TipTapEditor/TipTapEditor.css	Adds CSS intended to wrap/break long unspaced input and hide horizontal overflow.
gui/src/components/mainInput/TipTapEditor/components/StyledComponents.ts	Hides horizontal overflow on the input wrapper to prevent layout spill.
gui/src/components/Layout.tsx	Changes scrollbarGutter to avoid reserving gutter space on both edges.

Review details

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Low

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

[Cookie-CoDeRR]

Following images are the example of issue lastest version was dealing with, And this are the images after fixing that bug

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[Cookie-CoDeRR]

even after using community solution provided in one of the PR , jetbrains test is still failing, on testing locally the extention on Intelij IDEA, it was working as intended, so leaving this matter on a physical reviewer rather then co-pilot