Skip to content

fix: prevent Enter/send button from being pushed off-screen by long code blocks (#12958)#12961

Open
AmariahAK wants to merge 1 commit into
continuedev:mainfrom
AmariahAK:12958-fix-sidebar-flexbox-overflow
Open

fix: prevent Enter/send button from being pushed off-screen by long code blocks (#12958)#12961
AmariahAK wants to merge 1 commit into
continuedev:mainfrom
AmariahAK:12958-fix-sidebar-flexbox-overflow

Conversation

@AmariahAK

Copy link
Copy Markdown

Description

When AI responses contain long code blocks without line breaks, the chat sidebar stretches horizontally, pushing the Enter/send button out of view. This fix addresses the root cause in two places:
Root causes:

  1. StyledMarkdownPreview/index.tsx: <pre> elements used max-width: calc(100vw - 24px). In a VS Code webview sidebar, 100vw can be the full VS Code window width, not the actual sidebar width, allowing code blocks to grow far beyond the panel.
  2. Chat.tsx StepsDiv: The scrollable history container (flex-1) lacked min-w-0. CSS flexbox defaults to min-width: auto for flex children, preventing the container from shrinking below oversized content, shoving the input area + Enter button off-screen.
    Changes (4 files, targeted and surgical):
  • gui/src/pages/gui/Chat.tsx — added min-w-0 to StepsDiv so the flex container clips overflow instead of growing
  • gui/src/components/StyledMarkdownPreview/index.tsx — changed pre max-width from calc(100vw - 24px) to 100%, and overflow-x from scroll to auto
  • gui/src/components/StyledMarkdownPreview/SyntaxHighlightedPre.tsx — added max-width: 100% to StyledPre
  • gui/src/components/StepContainer/StepContainer.tsx — added min-w-0 to the message wrapper div
    Unlike the temporary CSS hotfix in Sidebar buttons pushed off-screen due to Flexbox overflow #12910 — which applies min-width: 0 to all flex elements globally and word-break: break-all to all <pre>/<code> elements (making code unreadable) — this fix is targeted at only the specific elements in the overflow chain. No wildcards, no !important, no code readability sacrifice.
    Closes Enter / send message button goes out of the screen over time #12958
    Closes Continue chat pane sizing error #12912

AI Code Review

  • Team members only: AI review runs automatically when PR is opened or marked ready for review
  • Team members can also trigger a review by commenting @continue-review

Checklist

  • I've read the contributing guide
  • The relevant docs, if any, have been updated or created (N/A — CSS-only layout fix)
  • The relevant tests, if any, have been updated or created (N/A — CSS-only layout fix; visual verification appropriate)

Screen recording or screenshot

N/A — this is a CSS/layout fix with no visual changes to the UI; it prevents the layout from breaking. To verify, test with a prompt that generates a long code block (e.g., "Write a Python script with a 500+ character string on one line") and confirm the Enter button remains visible.

Tests

No new tests added — this is a CSS flexbox layout fix targeting four specific elements. The existing test suites pass (lint-staged + Prettier verified on commit). Manual verification procedure:

  1. Launch extension in debug mode (F5 from VS Code)
  2. Send a prompt that produces a long code block without line breaks
  3. Confirm the Enter/send button stays visible and the sidebar does not stretch horizontally
  4. Confirm code blocks still scroll horizontally within their container for long lines
  5. Test in both sidebar panel and bottom panel positions

…ode blocks (continuedev#12958)

Long code blocks without line breaks were causing the chat sidebar to
stretch horizontally, pushing the Enter/send button out of view. Two
issues combined:

1. pre elements used max-width: calc(100vw - 24px) which in a VS Code
   webview sidebar can be the full VS Code window width (~1900px), not
   the actual sidebar width (~400px), allowing code blocks to grow far
   beyond the panel.

2. The scrollable StepsDiv flex container lacked min-w-0, so CSS
   flexbox default min-width: auto prevented it from shrinking below
   oversized content, pushing the fixed input area off-screen.

Fixes:
- Chat.tsx: added min-w-0 to StepsDiv (flex-1 container)
- StyledMarkdownPreview/index.tsx: changed pre max-width from
  calc(100vw - 24px) to 100%, and overflow-x from scroll to auto
- SyntaxHighlightedPre.tsx: added max-width: 100% to StyledPre
- StepContainer.tsx: added min-w-0 to message wrapper div

Unlike the temporary CSS hotfix (continuedev#12910) which applies min-width: 0
to all flex elements globally and word-break: break-all to all
pre/code (making code unreadable), this fix is targeted at only the
specific elements in the overflow chain.

Closes continuedev#12958
Closes continuedev#12912

Co-authored-by: atlarix-agent <agent@atlarix.dev>
@AmariahAK AmariahAK requested a review from a team as a code owner July 9, 2026 06:11
@AmariahAK AmariahAK requested review from sestinj and removed request for a team July 9, 2026 06:11
@dosubot dosubot Bot added the size:XS This PR changes 0-9 lines, ignoring generated files. label Jul 9, 2026
@github-actions

github-actions Bot commented Jul 9, 2026

Copy link
Copy Markdown
Contributor


Thank you for your submission, we really appreciate it. Like many open-source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution. You can sign the CLA by just posting a Pull Request Comment same as the below format.


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


You can retrigger this bot by commenting recheck in this Pull Request. Posted by the CLA Assistant Lite bot.

@AmariahAK

Copy link
Copy Markdown
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS This PR changes 0-9 lines, ignoring generated files.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Enter / send message button goes out of the screen over time Continue chat pane sizing error

2 participants