fix(runs): stop test run list rows from overflowing and overlapping#437
Merged
Conversation
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).
Contributor
Author
|
🎉 This PR is included in version 0.38.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-48on the forecast column,min-w-12on the status column). Those minimums refused to shrink, so on a narrower row the columns pushed past the row'soverflow-hiddencontainer 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-basedautominimums also made columns land at slightly different widths from row to row.Changes
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.min-w-0/overflow-hiddenand dropped the hard floors, so their content truncates within the column rather than widening the track.shrink-0.[&>span]:!shrink [&>span]:!min-w-0override so the sharedWorkflowStateDisplaydoesn't need to change.Testing
tsc --noEmitcleanVisual layout change — best confirmed by loading the Test Runs page (Active and Completed tabs) and a milestone detail page.