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.

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) {

src/components/labs/__tests__/lab-list-columns.test.tsx

@@ -111,7 +111,7 @@ describe("<LabList> 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("<LabList> 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)_");

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. */}
         <Card className="@container">
-          <CardContent className="divide-border grid grid-cols-1 divide-y p-0 lg:gap-x-3 lg:@max-5xl:grid-cols-[minmax(0,1fr)_max-content_12rem_72px_auto] @5xl:grid-cols-[minmax(0,1fr)_max-content_minmax(12rem,18rem)_minmax(72px,8rem)_auto]">
+          <CardContent className="divide-border grid grid-cols-1 divide-y p-0 lg:gap-x-3 lg:@max-5xl:grid-cols-[minmax(0,1fr)_max-content_12rem_72px_auto] @5xl:grid-cols-[minmax(0,1fr)_max-content_minmax(12rem,18rem)_72px_auto]">
             {groups.map((group) => {
               const inner = (
                 <div className={cn("min-w-0 flex-1", MOBILE_CELL.reading)}>