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.

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