fix(lab-card): align links across columns via subgrid

Problem: when links grouped by kind sat in side-by-side columns, the
second-row link in one column could sit slightly lower than its
sibling in the next column. Each column was its own layout context,
so rows didn't share heights across siblings — a short label on the
left and a long label on the right wouldn't align.

Fix: switch .lab-card__column to a CSS subgrid inheriting rows from
.lab-card__columns, so heading + each link row share heights across
all columns. Compute --lab-card-rows = max(link count per kind) from
JSX so the outer grid defines enough tracks.

Also flatten the per-column markup: the inner <ul> wrapper around the
link list is gone, since each column now lays out via grid rows
directly.

Author: danielnaab

src/design/components/lab-card/index.tsx

@@ -26,30 +26,30 @@ function groupByKind(links: readonly FeaturedLink[]): Column[] {
 
 export function LabCard({ lab }: { lab: FeaturedLab }) {
   const columns = groupByKind(lab.links)
+  const maxLinks = columns.reduce((n, c) => Math.max(n, c.links.length), 0)
+  // Expose the grid size so subgrid rows can align across columns.
+  const style = `--lab-card-rows: ${maxLinks};`
+
   return (
     <article class="lab-card">
       <div class="lab-card__intro">
         <h3 class="lab-card__title">{lab.title}</h3>
         <p class="lab-card__tagline">{lab.tagline}</p>
       </div>
-      <ul class="lab-card__columns">
+      <ul class="lab-card__columns" style={style}>
         {columns.map((column) => (
           <li class="lab-card__column">
             <p class="lab-card__column-heading">{KIND_HEADING[column.kind]}</p>
-            <ul class="lab-card__column-links">
-              {column.links.map((link) => (
-                <li>
-                  <a
-                    class="lab-card__column-link"
-                    href={link.url}
-                    rel="noopener external"
-                  >
-                    <LinkIcon kind={column.kind} />
-                    <span>{link.label}</span>
-                  </a>
-                </li>
-              ))}
-            </ul>
+            {column.links.map((link) => (
+              <a
+                class="lab-card__column-link"
+                href={link.url}
+                rel="noopener external"
+              >
+                <LinkIcon kind={column.kind} />
+                <span>{link.label}</span>
+              </a>
+            ))}
           </li>
         ))}
       </ul>

src/design/components/lab-card/styles.css

@@ -58,15 +58,6 @@
     margin: 0;
   }
 
-  .lab-card__column-links {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
-  }
-
   .lab-card__column-link {
     display: inline-flex;
     align-items: center;
@@ -95,10 +86,25 @@
     color: var(--color-link-hover);
   }
 
-  /* Wide enough for a multi-column layout — one column per link kind. */
+  /*
+   * On wide containers: one column per link kind, and all columns
+   * share row heights via subgrid so the Nth link in each column
+   * lines up horizontally — even when one column's label wraps.
+   *
+   * Row layout: 1 heading row + N link rows, where N is --lab-card-rows
+   * (the max link count across kinds, computed in JSX).
+   */
   @container (min-width: 32rem) {
     .lab-card__columns {
       grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
+      grid-template-rows: auto repeat(var(--lab-card-rows, 1), auto);
+      row-gap: var(--space-3);
+    }
+    .lab-card__column {
+      display: grid;
+      grid-template-rows: subgrid;
+      grid-row: span calc(var(--lab-card-rows, 1) + 1);
+      gap: 0;
     }
   }
 }

tests/views/components.test.tsx

@@ -112,6 +112,12 @@ describe('LabCard', () => {
     expect(html.match(/rel="noopener external"/g)?.length).toBe(4)
   })
 
+  test('exposes --lab-card-rows to size subgrid rows across columns', async () => {
+    const html = await renderToHtml(<LabCard lab={multiProject} />)
+    // Two links per column → 2 rows of links
+    expect(html).toContain('--lab-card-rows: 2')
+  })
+
   test('column order is Demo, Repository, Case study (only kinds present)', async () => {
     const html = await renderToHtml(<LabCard lab={multiProject} />)
     const demoIdx = html.indexOf('>Demo<')