Skip to content

fix: keep code-block toolbar within panel bounds when sidebar is narrowed - #13095

Open
bunnysayzz wants to merge 1 commit into
continuedev:mainfrom
bunnysayzz:fix/codeblock-toolbar-overflow-13085
Open

fix: keep code-block toolbar within panel bounds when sidebar is narrowed#13095
bunnysayzz wants to merge 1 commit into
continuedev:mainfrom
bunnysayzz:fix/codeblock-toolbar-overflow-13085

Conversation

@bunnysayzz

Copy link
Copy Markdown

Description

Fixes #13085 — when the Continue sidebar/panel is narrowed, the code-block header bar (Copy/Run/Enter buttons) does not resize and the action buttons get hidden under the sidebar edge. Explanation text between code blocks could also overflow.

Root cause: the toolbar header is a flex row whose children have flexbox's default min-width: auto, which prevents them from shrinking. The root container has overflow-x: hidden, so when the panel narrows, the button row is pushed past the visible area and clipped.

Fix (in StepContainerPreToolbar):

  • Title side (filepath/language + chevron): added min-w-0 so it can shrink; the filepath already truncates via line-clamp-1 break-all.
  • Action-button side: added shrink-0 so Copy/Run/Apply buttons are never clipped.
  • Header row: added flex-wrap + gap-x-3 gap-y-1 so on very narrow widths the buttons wrap to a second line instead of overflowing.

This targets the code-block header specifically (the issue's primary symptom). Explanation-text reflow stems from the same overflow root and is also relieved once the block no longer forces itself wider than the panel.

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
  • The relevant tests, if any, have been updated or created

Screen recording or screenshot

When the sidebar is narrower than the code-block toolbar, the buttons now stay visible (title truncates / buttons wrap) instead of being clipped at the panel edge.

Tests

Added gui/src/components/StyledMarkdownPreview/StepContainerPreToolbar/index.test.tsx:

  • smoke test (component renders)
  • regression test asserting the title container has min-w-0 (shrinkable) and the action-button container has shrink-0 (never clipped)

All 44 tests in StyledMarkdownPreview/ pass (npx vitest run src/components/StyledMarkdownPreview/). tsc --noEmit shows only pre-existing workspace-package resolution errors in core/ (unbuilt @continuedev/config-yaml), none in the changed files.

…owed

Code-block header bars (Copy/Run/Enter buttons) overflowed past the panel
edge when the sidebar was narrowed, hiding the action buttons. Flexbox's
default min-width:auto prevented the toolbar's flex children from
shrinking. Allow the title side to shrink and truncate (min-w-0) while
pinning the action buttons (shrink-0), and let the header wrap on very
narrow widths.

Fixes continuedev#13085
@bunnysayzz
bunnysayzz requested a review from a team as a code owner August 6, 2026 06:21
@bunnysayzz
bunnysayzz requested review from sestinj and removed request for a team August 6, 2026 06:21
@github-actions

github-actions Bot commented Aug 6, 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.

@bunnysayzz

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

None yet

Projects

None yet

1 participant