Skip to content

fix(runs): stop test run list rows from overflowing and overlapping#437

Merged
therealbrad merged 1 commit into
mainfrom
fix/testrun-list-items
Jun 14, 2026
Merged

fix(runs): stop test run list rows from overflowing and overlapping#437
therealbrad merged 1 commit into
mainfrom
fix/testrun-list-items

Conversation

@therealbrad

Copy link
Copy Markdown
Contributor

Problem

On the project Test Runs page, the list rows rendered their columns with a CSS grid that used minmax(auto, …) tracks plus hard min-width floors (min-w-48 on the forecast column, min-w-12 on the status column). Those minimums refused to shrink, so on a narrower row the columns pushed past the row's overflow-hidden container and clipped or crammed into each other — the status, forecast, and summary text visibly ran together and got cut off. Because each row is its own grid, the content-based auto minimums also made columns land at slightly different widths from row to row.

Changes

  • Grid sizing: every column track is now minmax(0, fr), so columns shrink to fit the row instead of overflowing, and resolve to the same width on every row for consistent alignment.
  • Status & forecast cells: given min-w-0 / overflow-hidden and dropped the hard floors, so their content truncates within the column rather than widening the track.
  • Forecast text now truncates with an ellipsis (the existing hover tooltip still shows the full value); the leading icons are shrink-0.
  • Workflow state name now truncates with an ellipsis instead of a hard mid-word clip, reusing the existing [&>span]:!shrink [&>span]:!min-w-0 override so the shared WorkflowStateDisplay doesn't need to change.
  • Milestone visibility: completed runs (shown as a flat list) display their milestone, while active runs (already grouped under milestone headers, where it's redundant) no longer repeat it. The milestone detail page keeps its own behavior.

Testing

  • tsc --noEmit clean
  • Full precommit suite passed (zenstack format, lint, format check, 9419 unit tests)

Visual layout change — best confirmed by loading the Test Runs page (Active and Completed tabs) and a milestone detail page.

The test run list item used a CSS grid with minmax(auto, …) tracks plus
hard min-width floors (min-w-48 on the forecast column, min-w-12 on the
status column). Those minimums refused to shrink, so on a constrained row
the columns pushed past the overflow-hidden container and clipped/cramped
into each other. Because each row is its own grid, the content-based auto
minimums also made columns land at different widths row to row.

- Switch every grid track to minmax(0, fr) so columns shrink to fit and
  resolve to the same width on every row (consistent alignment).
- Give the status and forecast cells min-w-0/overflow-hidden and drop the
  hard floors so their content truncates instead of widening the track.
- Forecast text now truncates with an ellipsis (tooltip still shows the
  full value); icons are shrink-0.
- Workflow state name truncates with an ellipsis via the existing
  [&>span]:!shrink override pattern, instead of a hard clip.
- Show the milestone on completed runs (flat list) but not on active runs
  (already grouped under milestone headers, where it is redundant).
@therealbrad therealbrad merged commit 4e705be into main Jun 14, 2026
5 checks passed
@therealbrad therealbrad deleted the fix/testrun-list-items branch June 14, 2026 13:25
@therealbrad

Copy link
Copy Markdown
Contributor Author

🎉 This PR is included in version 0.38.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant