Repository navigation
Wrap Alert and ListItem end content below the text when narrow - #730
Merged
Merged
Conversation
Alert's end area and ListItem's end content sat beside the text in a row that never wrapped, and neither shrank. On a phone, an alert with two actions squeezed its title and description to one letter per line and pushed the actions off screen; a list item with a button cut its label down to a few characters. Alert now lays its text and end area out in a wrapping row beside the icon. When both fit, the layout is unchanged. When the end area doesn't fit beside 12rem of text, it moves under the text, aligned with the title, and its actions wrap among themselves. Item gains hasWrappingEndContent, which ListItem turns on: end content that doesn't fit beside 12rem of text moves to its own line at the trailing edge. It stays opt-in on Item so menu items keep shortcuts and icons inline. ListItem also passes labelLines and descriptionLines through, so a list can let a long label or description wrap instead of truncating to one line. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
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.
On a phone,
AlertandListItemend content squeezed the text next to it instead of moving out of its way. Both laid the text and end content out in a row that never wrapped, and the end content never shrank. In the Bomi client portal, an alert with Call and Email buttons collapsed its title to one letter per line and pushed the buttons off a 320–390px screen, and document rows cut their names to a few characters beside a "Start form" button.Alert. The text and the end area now share a wrapping row beside the icon. When both fit, nothing changes: the same 24px gutter, the same alignment, and the dismiss/collapse controls stay with the actions. When the end area doesn't fit beside 12rem of text, it moves under the text, aligned with the title, and its actions wrap among themselves. I used flex wrapping rather than a container query because a container query needs
container-type: inline-size, which would collapse an Alert placed in a shrink-to-fit parent.Item / ListItem.
ItemgetshasWrappingEndContent, off by default so menu items keep shortcuts and icons inline.ListItemturns it on: end content that doesn't fit beside 12rem of text moves to its own line at the trailing edge. That works whether the end content sits inside the content wrapper or is hoisted beside an interactive item.ListItemalso passeslabelLinesanddescriptionLinesthrough toItem, so a list can let long text wrap rather than truncate to one line.Tests. New browser tests (real layout) check both widths: at 900px the end content stays beside the text; at 300–320px it moves under it and the text keeps its width. The narrow-width cases and the
labelLinescase fail onmain. The unit test for the Alert gutter now checks the row's column gap. NewNarrowEndContentstories for Alert and List show both at 320px.pnpm testandpnpm smoke:packagepass.Checked against the Bomi EHR portal built with this package: desktop pages are byte-identical to before, and at 320px the alerts and list rows fit.
🤖 Generated with Claude Code