From 56c8d54435892670d7c80f6d4fda8bb84ab87240 Mon Sep 17 00:00:00 2001
From: Pontoporeia <pontoporeia@happyngreen.fr>
Date: Thu, 30 Apr 2026 11:42:44 +0200
Subject: [PATCH] repertoire: align all column headings to shared baseline row

---
 TODO.md                              |  1 +
 app/public/assets/css/repertoire.css | 42 +++++++++++++++-------------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/TODO.md b/TODO.md
index 066509b..39f3e15 100644
--- a/TODO.md
+++ b/TODO.md
@@ -68,6 +68,7 @@
 - [x] Make column headings sticky/non-scrollable; only `ul` scrolls per column
 - [x] Remove padding from `.search-main` and `.repertoire-index`
 - [x] Minimal horizontal padding inside columns (`var(--space-2xs)`)
+- [x] Align all column headings to the same baseline row (2-row grid via `display: contents`)
 
 ## CSS refactor
 
diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css
index 2424cfb..258b356 100644
--- a/app/public/assets/css/repertoire.css
+++ b/app/public/assets/css/repertoire.css
@@ -15,6 +15,7 @@
 .repertoire-index {
     display: grid;
     grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr;
+    grid-template-rows: auto 1fr;
     gap: 0;
     padding: 0;
     height: 100%;
@@ -24,44 +25,50 @@
     .repertoire-index {
         grid-template-columns: 1fr 1fr 1fr;
         padding: 0;
+        grid-template-rows: auto auto 1fr;
         min-height: auto;
     }
-
-    .repertoire-col {
-        border-bottom: 1px solid var(--border-primary);
-    }
-
-    .repertoire-col:nth-child(3n) {
-        border-right: none;
-    }
 }
 
 @media (max-width: 600px) {
     .repertoire-index {
         grid-template-columns: 1fr;
         padding: 0;
+        grid-template-rows: none;
         min-height: auto;
     }
 
+    /* On single column, each section is a self-contained block again */
     .repertoire-col {
-        border-right: none;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        min-height: 12rem;
         border-bottom: 1px solid var(--border-primary);
     }
 
     .repertoire-col:last-child {
         border-bottom: none;
     }
+
+    .repertoire-col > h2 {
+        grid-row: unset;
+        align-self: unset;
+    }
+
+    .repertoire-col > ul {
+        grid-row: unset;
+        flex: 1;
+    }
 }
 
+/* Each section becomes transparent to the grid so h2+ul sit in the 2-row layout */
 .repertoire-col {
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-    overflow: hidden;
+    display: contents;
 }
 
 .repertoire-col > h2 {
-    flex-shrink: 0;
+    grid-row: 1;
     font-family: var(--font-display);
     font-size: var(--step--2);
     letter-spacing: 0.1em;
@@ -71,19 +78,16 @@
     margin: 0;
     padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
     border-bottom: 1px solid var(--border-secondary);
+    align-self: end;
 }
 
 .repertoire-col > ul {
-    flex: 1;
+    grid-row: 2;
     overflow-y: auto;
     overflow-x: hidden;
     padding: var(--space-2xs) var(--space-2xs) var(--space-l);
 }
 
-.repertoire-col:last-child {
-    border-right: none;
-}
-
 /* Strip list chrome inside repertoire columns */
 .repertoire-col ul {
     list-style: none;