fix: allow preview toolbar controls to wrap on narrow viewports#2295
Open
algojogacor wants to merge 1 commit into
Open
fix: allow preview toolbar controls to wrap on narrow viewports#2295algojogacor wants to merge 1 commit into
algojogacor wants to merge 1 commit into
Conversation
When the chat panel is widened, the workspace panel shrinks and the preview toolbar action buttons can overflow. This changes the fixed toolbar height to a min-height and enables flex-wrap on the toolbar actions container so controls wrap instead of clipping. Fixes nexu-io#2166
lefarcen
added
size/XS
lefarcen
reviewed
May 19, 2026
Contributor
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Hi @algojogacor! The regression write-up is clear, and tying it back to #2166 makes the scope easy to follow. One small PR-body nudge before pool review: could you add the Surface area checklist and mark the UI surface, since this changes the preview toolbar behavior users see? The Summary / Root Cause / Testing sections already cover the rest well.
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
2 participants
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.
This is an independent contribution and is not part of any competition, organized event, or sponsored program.
Summary
When the left chat panel is widened, the workspace panel shrinks and the preview toolbar action buttons can overflow their container, causing controls on the right side to be clipped and inaccessible.
Root Cause
The
.viewer-toolbarhad a fixedheight: 44pxand.viewer-toolbar-actionsuseddisplay: inline-flexwithoutflex-wrap. When the available horizontal space decreased, the non-wrapping inline-flex container caused child controls to overflow the fixed-height container, visually clipping them.Fix
Two-line CSS change in
apps/web/src/index.css:.viewer-toolbarfromheight: 44pxtomin-height: 44px— allows the bar to grow vertically when controls wrapflex-wrap: wrapto.viewer-toolbar-actions— allows toolbar controls to wrap onto a new line instead of overflowingThis preserves the existing appearance at normal widths while allowing the toolbar to adapt when the workspace panel is narrowed.
Testing
flex-shrink: 0on.viewer-toolbaris preserved, so it never collapsesCloses #2166