fix: keep code-block toolbar within panel bounds when sidebar is narrowed - #13095
Open
bunnysayzz wants to merge 1 commit into
Open
fix: keep code-block toolbar within panel bounds when sidebar is narrowed#13095bunnysayzz wants to merge 1 commit into
bunnysayzz wants to merge 1 commit into
Conversation
…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
Contributor
|
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. |
Author
|
I have read the CLA Document and I hereby sign the CLA |
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.
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 hasoverflow-x: hidden, so when the panel narrows, the button row is pushed past the visible area and clipped.Fix (in
StepContainerPreToolbar):min-w-0so it can shrink; the filepath already truncates vialine-clamp-1 break-all.shrink-0so Copy/Run/Apply buttons are never clipped.flex-wrap+gap-x-3 gap-y-1so 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
@continue-reviewChecklist
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:min-w-0(shrinkable) and the action-button container hasshrink-0(never clipped)All 44 tests in
StyledMarkdownPreview/pass (npx vitest run src/components/StyledMarkdownPreview/).tsc --noEmitshows only pre-existing workspace-package resolution errors incore/(unbuilt@continuedev/config-yaml), none in the changed files.