fix(labs): keep the trend column as wide as its sparkline on a wide list

The wide tier let the trend column grow to 8rem while the sparkline it
holds is a fixed 72px glyph, so at 1920 px an empty 56 px strip opened
between the sparkline and the chevron. The column now stays 72px in both
tiers; the extra width goes to the range bar and the name, as before.

The wide-list spec reads the resolved grid tracks and asserts the trend
track is 72px at every width it covers.
This commit is contained in:
Marc-André Bombeck committed 2026-10-04 14:28:04 +02:00
1 parent 0ae50849d8
commit 29798a76e3
3 files changed
+24 -5

No files matched your search

+12 -1
View File
@@ -19,7 +19,8 @@ import {
*
* - below 64 rem of card the row is the `lg` table it always was, and the
* range bar keeps its 12 rem;
* - from 64 rem the bar follows its column up to 18 rem.
* - from 64 rem the bar follows its column up to 18 rem, and the trend
* column stays as wide as its 72 px sparkline.
*
* From `lg` a long name wraps instead of being cut off. The tiers are measured
* on the card's width and not the viewport's, so the spec reads the card and
@@ -94,6 +95,16 @@ test.describe("the lab list uses its width", () => {
}
}
// The trend column is exactly as wide as the sparkline it holds, in both
// tiers. The sparkline is a fixed 72 px glyph; a wider column would only
// open an empty strip between it and the chevron.
const tracks = await page
.locator('[data-slot="lab-list"] [data-slot="card-content"]')
.first()
.evaluate((node) => getComputedStyle(node).gridTemplateColumns);
const trendTrack = tracks.split(" ")[3];
expect(trendTrack, `trend column in "${tracks}"`).toBe("72px");
// The widest windows must actually reach the wide tier, or the branch
// above never ran.
if (width >= 1920) {