From 3fbc6b8ad8b9d730e5463eeded5eb8ad1c54265f Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Sun, 20 Sep 2026 13:22:26 +0200
Subject: [PATCH] Align year-row timelines with a shared subgrid

Each year's <summary> was its own grid, so the `auto` figures column was
sized per row and the timeline tracks ended at a different x per year.
Promote the column definition to `.year-rows` and have the rows opt in
with `grid-template-columns: subgrid`, behind an @supports guard so
engines without subgrid keep today's layout. Mobile undoes the promotion.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JVQx4NUvPbJhn6UcvRd2QY
---
 frontend/src/styles/components.css | 38 ++++++++++++++++++++++++++++++
 frontend/src/styles/responsive.css | 11 +++++++++
 2 files changed, 49 insertions(+)

diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index c21f07c..32c7d01 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -331,6 +331,44 @@
   padding: var(--sp-2) 0 var(--sp-5) 3.5rem;
 }
 
+/* Subgrid: promotes the summary's columns to `.year-rows` so every row's
+ * figures share the same tracks — the timeline and figure columns then
+ * line up across years instead of each row's `auto` column sizing to its
+ * own text. Engines without subgrid keep the independent per-row grid
+ * above. */
+@supports (grid-template-columns: subgrid) {
+  .year-rows {
+    display: grid;
+    grid-template-columns: 3.5rem minmax(0, 1fr) auto auto auto var(--icon-sm);
+    column-gap: var(--sp-4);
+  }
+
+  .year-row {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .year-row__summary {
+    grid-column: 1 / -1;
+    display: grid;
+    grid-template-columns: subgrid;
+  }
+
+  .year-row__summary::after {
+    grid-column: 6;
+  }
+
+  .year-row__body {
+    grid-column: 1 / -1;
+  }
+
+  .year-row__figures {
+    grid-column: 3 / 6;
+    grid-template-columns: subgrid;
+  }
+}
+
 .year-row__table {
   width: auto;
   margin-bottom: var(--sp-4);
diff --git a/frontend/src/styles/responsive.css b/frontend/src/styles/responsive.css
index 572d28c..6347506 100644
--- a/frontend/src/styles/responsive.css
+++ b/frontend/src/styles/responsive.css
@@ -91,6 +91,17 @@
     gap: var(--sp-4) var(--sp-6);
   }
 
+  /* Undo the subgrid promotion (components.css) — mobile keeps each row's
+   * own independent layout below, not the shared per-year-list tracks. */
+  .year-rows {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .year-row {
+    display: block;
+  }
+
   .year-row__summary {
     grid-template-columns: 3rem minmax(0, 1fr) var(--icon-sm);
   }