Repository navigation
fix(web): wrap the design card's action labels instead of clipping - #174
Conversation
|
Before and after, rendered from the real
At 320px the long label is no longer clipped. At 420px it now wraps even though it fits; a follow-up commit on this PR fixes that. |
878878e to
8995b6e
Compare
|
Updated: a label now wraps only when the row is full (gist).
|
|
Triage: Pass No changes needed from you. A maintainer will review this pull request. Approve held: code review has 1 finding at P2 or above open on this head. |
| > button { | ||
| flex: 1 1 0; | ||
| min-width: 0; | ||
| flex: 1 1 auto; |
There was a problem hiding this comment.
P2 · Buttons never stack and can overflow the card
Removing min-width: 0 makes each button at least as wide as its longest word, as intended. But the container still has flex-wrap: nowrap (line 227), so the pair cannot stack as described. When the two longest words together are wider than the card, the buttons run past its edge.
A narrow card, or long single words in both labels
Resolve this comment. Triage will not finish while it is open.



Closes CL-12091
The design-start approval card no longer clips its action labels. Its buttons kept nowrap with hidden overflow, and because the button centres its text, a long label like "Start Bright and colourful" was cut at both ends. The buttons now keep their shared width and height but wrap a long label between words, and each is at least as wide as its longest word, so the pair stacks when even that does not fit. Word-level wrapping overrides the card's overflow-wrap anywhere, so the per-character wrapping fixed in CL-12054 does not return. Short labels still sit on one line at the same size.
Verified by reading the library button and card styles the rule overrides; no render test exists for this card and a browser render was not run. Lint, format check, typecheck, tests and pins:verify pass.