diff --git a/e2e/labs-list-wide.spec.ts b/e2e/labs-list-wide.spec.ts index 52b624cf4..4ca0fe357 100644 --- a/e2e/labs-list-wide.spec.ts +++ b/e2e/labs-list-wide.spec.ts @@ -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) { diff --git a/src/components/labs/__tests__/lab-list-columns.test.tsx b/src/components/labs/__tests__/lab-list-columns.test.tsx index a41569dec..21e133d8a 100644 --- a/src/components/labs/__tests__/lab-list-columns.test.tsx +++ b/src/components/labs/__tests__/lab-list-columns.test.tsx @@ -111,7 +111,7 @@ describe(" columns", () => { const NARROW_TIER = "lg:@max-5xl:grid-cols-[minmax(0,1fr)_max-content_12rem_72px_auto]"; const WIDE_TIER = - "@5xl:grid-cols-[minmax(0,1fr)_max-content_minmax(12rem,18rem)_minmax(72px,8rem)_auto]"; + "@5xl:grid-cols-[minmax(0,1fr)_max-content_minmax(12rem,18rem)_72px_auto]"; it("makes the card a container, so the columns follow the list's width, not the window's", () => { const html = renderList([reading({})]); @@ -127,6 +127,11 @@ describe(" columns", () => { expect(WIDE_TIER.split("_")).toHaveLength(5); }); + it("keeps the trend column as wide as its 72px sparkline in both tiers", () => { + expect(NARROW_TIER.split("_")[3]).toBe("72px"); + expect(WIDE_TIER.split("_")[3]).toBe("72px"); + }); + it("keeps the name column the flexible one in both tiers", () => { expect(NARROW_TIER).toContain("[minmax(0,1fr)_"); expect(WIDE_TIER).toContain("[minmax(0,1fr)_"); diff --git a/src/components/labs/lab-list.tsx b/src/components/labs/lab-list.tsx index f7662a347..668ca4813 100644 --- a/src/components/labs/lab-list.tsx +++ b/src/components/labs/lab-list.tsx @@ -261,10 +261,13 @@ export function LabList({ onAddFirst }: { onAddFirst?: () => void } = {}) { {/* `@container` makes the columns follow the width the list has, not the window's: below `@5xl` (64rem of card) the row is the `lg` table it always was (the two tiers exclude each other, so the result does not - depend on the order the CSS is emitted in), from there up the range bar and the trend take part of - the extra width instead of all of it going to the name. */} + depend on the order the CSS is emitted in), from there up the range + bar takes part of the extra width instead of all of it going to the + name. The trend column stays 72px in both tiers: the sparkline is a + fixed 72px glyph, and a wider column would only open an empty strip + between it and the chevron. */} - + {groups.map((group) => { const inner = (