fix(site): keep at least 8 characters of the model name visible in the model selector - #28487
Open
tracyjohnsonux wants to merge 11 commits into
Open
fix(site): keep at least 8 characters of the model name visible in the model selector#28487tracyjohnsonux wants to merge 11 commits into
tracyjohnsonux wants to merge 11 commits into
Conversation
…e model selector trigger The trigger's min-w-0 chain let the label collapse to zero width when the composer badge row was full, leaving only the provider icon and chevron. Give the label a min-w-[8ch] floor and remove the min-w-0 overrides so the floor propagates; the badge overflow (+N) pill absorbs the remaining pressure. The gap between the label and the chevron is unchanged.
… min-w-0 Removing min-w-0 made the label wrapper's automatic minimum the full nowrap label width, so nothing could shrink: truncation stopped and the chevron was pushed out and clipped. Restore the original inner structure (min-w-0 wrapper + truncate label) and put an explicit min-width on the trigger button: 8ch of label plus the fixed chrome (padding, provider icon, gaps, chevron). The button now shrinks and truncates normally but never below ~8 characters, with the chevron always inside the pill.
tracyjohnsonux
enabled auto-merge (squash)
August 25, 2026 17:34
With the model selector no longer collapsing, the shrink pressure moved to the workspace pill, whose overflow-hidden wrapper clipped it down to just the status icon with no chevron. Raise its md min-width from 2.75rem to the same 8ch + 3.125rem floor as the model selector, and make the trigger fill the wrapper so the truncating name span shrinks instead of the wrapper clipping the chevron.
calc() requires whitespace around +, and Tailwind arbitrary values encode spaces as underscores. calc(8ch+3.125rem) produced invalid CSS that was silently dropped, so the floor never applied.
calc() requires whitespace around +, and Tailwind arbitrary values encode spaces as underscores. calc(8ch+3.125rem) produced invalid CSS that was silently dropped, so the floor never applied.
The plain span wrapping WorkspacePill had an automatic minimum equal to the pill's full content width, so under pressure the pill never shrank and was clipped to just its icon. Make the wrapper a flex container that can shrink, with the same md 8ch + chrome floor as the pill itself. Verified in Storybook at narrow desktop panel widths: both pills hold 8 characters with ellipsis and visible chevrons.
…urizes Treat the attached workspace like the other overflow-managed badges. When the row overflows and the workspace would otherwise survive only as a tiny minimum-width pill, stop rendering it in the visible row and surface it through the +N overflow popover instead. Update the stories to exercise the real attached-workspace path used by the chat view.
… overflow The below-md icon-only variant was the remaining tiny state: at narrow viewports the pill collapsed to a bare status icon that always fit, so it never entered the overflow popover. Render name and chevron at every breakpoint with the 8ch floor; when the floored pill no longer fits, the badge overflow system moves it into the +N popover. The pill renders whenever workspace data is present, with attachedWorkspace only enriching its overflow-popover fallback badge.
Contributor
Author
|
@codex review
|
|
To use Codex here, create a Codex account and connect to github. |
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
1 participant
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.
Problem
When the composer's button area fills up (badges, workspace pill, MCP servers), the model selector trigger in the chat input collapses down to just the provider icon and chevron — the model name is truncated away entirely. The trigger
Buttonhadmin-w-0, so the flex chain allowed thetruncatelabel to shrink to zero width.Fix
Add an explicit width floor on the trigger button:
min-w-[calc(8ch+3.125rem)]— 8ch of label plus the fixed chrome around it (px-2padding,size-3provider icon, twogap-1gaps,size-3.5chevron).min-widthreplaces the button's automatic minimum, so it still shrinks and the label still truncates with an ellipsis, but never below ~8 visible characters.min-w-0wrapper +truncatelabel) is unchanged, so truncation behavior and the label–chevrongap-1are identical to before; the chevron always stays inside the pill.+Noverflow pill absorbs the remaining width pressure.No behavior change for the other
ModelSelectorcallsites other than gaining the same floor, which only applies under width pressure.Iteration notes
An earlier revision removed
min-w-0from the button and label wrapper and putmin-w-[8ch]on the label. That backfired: withoutmin-w-0, the wrapper's automatic minimum became the full nowrap label width, so nothing could shrink — truncation stopped and the chevron was pushed out and clipped. The final approach floors the button width explicitly instead, leaving the shrink/truncate mechanics untouched.This PR was generated by Coder Agents on behalf of @tracyjohnsonux.