fix(client): keep long workflow names inside the pipeline card - #1181
Conversation
The workflow-run name is a flex child with `truncate` but no `min-width: 0`, so it refused to shrink below its content width and overflowed the panel's rounded border (pushing the log/GitHub icons past the edge) for long names like "Automatic Dependency Submission (Gradle)" in the Ungrouped group. Give the name `flex-1 min-w-0` so it truncates with an ellipsis, pin the icons with `flex-shrink-0`, and add `min-w-0` to the row wrapper so the shrink chain works. The full name remains available via the existing tooltip. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Up to standards ✅🟢 Issues
|
| Metric | Results |
|---|---|
| Coverage variation | ✅ +0.00% coverage variation (-1.00%) |
| Diff coverage | ✅ 100.00% diff coverage |
Coverage variation details
Coverable lines Covered lines Coverage Common ancestor commit (f0fa77b) 15441 7614 49.31% Head commit (e92e6d3) 15441 (+0) 7614 (+0) 49.31% (+0.00%) Coverage variation is the difference between the coverage for the head and common ancestor commits of the pull request branch:
<coverage of head commit> - <coverage of common ancestor commit>
Diff coverage details
Coverable lines Covered lines Diff coverage Pull request (#1181) 3 3 100.00% Diff coverage is the percentage of lines that are covered by tests out of the coverable lines that the pull request added or modified:
<covered lines added or modified>/<coverable lines added or modified> * 100%
NEW Get contextual insights on your PRs based on Codacy's metrics, along with PR and Jira context, without leaving GitHub. Enable AI reviewer
TIP This summary will be updated as you push new changes.
There was a problem hiding this comment.
Pull request overview
This PR fixes a flexbox truncation/overflow issue in the Pipeline UI so long workflow names stay within the 250px pipeline card, keeping the log/GitHub icons inside the rounded border while still exposing the full name via the existing tooltip.
Changes:
- Adds
min-w-0andflex-1to the workflow name span sotruncatecan properly shrink and ellipsize within a flex row. - Pins the icon group with
flex-shrink-0so icons remain visible and don’t get pushed outside the card. - Ensures the flex shrink chain can propagate by adding
min-w-0to the row wrapper.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Bug: long workflow names (e.g. Automatic Dependency Submission (Gradle) in the Ungrouped group) overflow past the pipeline card's rounded border, dragging the log/GitHub icons outside the box. (Reported on prod PR #13092.)
Cause: classic flexbox truncation bug — the name has
truncatebut is a flex child withoutmin-width: 0, so it won't shrink below its content width and overflows.Fix: name →
flex-1 min-w-0 truncate(shrinks + ellipsis within the 250px card), icons →flex-shrink-0(stay pinned inside), row wrapper →min-w-0(so the shrink chain propagates). Full name still shown via the existingpTooltip.