Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TheGreatAxios merged 2 commits into from
Nov 4, 2026
Merged

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

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bf7808e
fix(web): wrap the design card's action labels instead of clipping
TheGreatAxios Nov 4, 2026
8995b6e
fix(web): wrap a design card's action label only when the line is full
TheGreatAxios Nov 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 12 additions & 7 deletions apps/web/src/pages/workspace-layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -218,8 +218,11 @@
margin-inline-start: 0;
}

/* Design approval: the two actions share one line, one width and one
height. Not yet is not pinned to the right edge, and the labels do not wrap. */
/* Design approval: the two actions share one line and one height, and Not
yet is not pinned to the right edge. Each starts at its label's width and
shares the spare room, so a label wraps between words only once the line
is too narrow for it; the button centres its text, so clipping it would
cut both ends. */
.document-decision-design [data-slot="tool-approval-card"] > div:last-child {
flex-wrap: nowrap;
align-items: stretch;
Expand All @@ -229,12 +232,14 @@
[data-slot="tool-approval-card"]
> div:last-child
> button {
flex: 1 1 0;
min-width: 0;
flex: 1 1 auto;

@corbits-triage corbits-triage Bot Nov 4, 2026

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.

margin-inline-start: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: auto;
min-height: 2rem;
white-space: normal;
overflow-wrap: normal;
word-break: normal;
text-align: center;
}

/* The library keeps a settled line's words from shrinking, so a long document title ran past the
Expand Down