Skip to content

fix(web): wrap the design card's action labels instead of clipping - #174

Merged
TheGreatAxios merged 2 commits into
mainfrom
cl-12091-show-an-approval-cards-full-button-label-instead-of-clipping
Nov 4, 2026
Merged

TheGreatAxios merged 2 commits into
mainfrom
cl-12091-show-an-approval-cards-full-button-label-instead-of-clipping

Conversation

@TheGreatAxios

Copy link
Copy Markdown
Contributor

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.

@linear-code

linear-code Bot commented Nov 4, 2026

Copy link
Copy Markdown

CL-12091

@TheGreatAxios

Copy link
Copy Markdown
Contributor Author

Before and after, rendered from the real DocumentDecision component with each branch's CSS, at 320px and 420px panes (gist).

Before (main) After (this PR)
before after

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.

@TheGreatAxios
TheGreatAxios force-pushed the cl-12091-show-an-approval-cards-full-button-label-instead-of-clipping branch from 878878e to 8995b6e Compare November 4, 2026 22:47
@TheGreatAxios
TheGreatAxios marked this pull request as ready for review November 4, 2026 22:47
@TheGreatAxios

Copy link
Copy Markdown
Contributor Author

Updated: a label now wraps only when the row is full (gist).

Before (main) After (8995b6e)
before after

@corbits-triage

corbits-triage Bot commented Nov 4, 2026 •

Copy link
Copy Markdown

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;

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@TheGreatAxios
TheGreatAxios merged commit 5a48c90 into main Nov 4, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant