fix: prevent CLI path overflow in chat status card#2531
Conversation
Added text-overflow handling to .op-waiting-detail so long CLI startup paths truncate with ellipsis instead of overflowing the card boundary. Changes: - max-width: 100% - constrains to parent width - overflow: hidden - clips overflowing text - text-overflow: ellipsis - shows ... for truncated text - white-space: nowrap - prevents wrapping Closes nexu-io#2206
Visual regression reviewHead: 0 changed · 17 unchanged · 0 missing baseline · 0 failed Unchanged cases
Visual diff is advisory only and does not block merging. |
lefarcen
added
size/XS
|
Heads-up: #2283 and #2352 are already open against #2206, and all three PRs touch #2283 is covering the assistant |
lefarcen
left a comment
lefarcen
left a comment
There was a problem hiding this comment.
Hey @xxiaoxiong, thanks for keeping the overflow fix tightly scoped to the status-card text. The description already explains the old-template Summary/Why well, but before pool review picks this up could you add the new-template Surface area checklist and a short Validation section? For validation, a quick note on how you checked the long-path card behavior is enough.
mrcfps
left a comment
mrcfps
left a comment
There was a problem hiding this comment.
@xxiaoxiong Thanks for taking on the CLI path overflow fix. I found one blocker in the current CSS change: the new ellipsis rules still do not let this flex item shrink, so long unbroken paths can continue to overflow the waiting card.
🔁 Powered by Looper · runner=reviewer · agent=opencode · An autonomous AI dev team for your GitHub repos.| max-width: 100%; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; |
There was a problem hiding this comment.
Because .op-waiting-detail is a flex item inside .op-waiting (display: flex a few lines above) and this change also forces the path to stay on one line, max-width: 100% plus overflow: hidden still will not shrink a long unbroken filesystem path below its min-content width. That means the bug this PR is trying to fix can still reproduce: the <code> pill keeps the full path width and overflows instead of showing an ellipsis. Please add min-width: 0 here (or an equivalent shrinking flex rule such as flex: 1 1 0) and keep the ellipsis styles on that shrinking box so the path can actually truncate inside the card.
3 participants
Summary
Fixes long CLI startup paths overflowing the chat status card boundary.
What changed
Added text-overflow handling to
.op-waiting-detail:max-width: 100%- constrains to parent card widthoverflow: hidden- clips overflowing texttext-overflow: ellipsis- shows...for truncated contentwhite-space: nowrap- prevents line wrappingWhy
The CLI startup status displays the daemon path in a
<code>element with class.op-waiting-detail. Long filesystem paths (common on Linux/macOS with deep project directories) would extend beyond the card boundary, breaking the layout and making the status message hard to read.Result
Long CLI paths now truncate cleanly with an ellipsis, staying within the card boundary while still showing the beginning of the path (which typically contains the most relevant context).
Closes #2206