fix(compare): sticky school bar hidden behind the site header

The Navigation header is position:sticky top:0 (z-index 1000). The school
bar was also sticky top:0 (z-index 10), so when scrolled it pinned at the
same top:0 *behind* the header — on mobile 57 of its 72px were covered,
leaving only a sliver, so you couldn't see which schools were selected.

Offset the bar's sticky top to the header height (65px desktop, 57px
mobile — the Navigation breakpoint is also 640px) so it pins just below.

e2e guard asserts the bar's sticky offset is at least the header height
(verified it fails against the pre-fix build).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0146VHeLAWjDVE2B5uU67jCB

e2e/tests/journeys.spec.ts

@@ -227,6 +227,19 @@ test('compare chart on mobile shows school chips with tap-to-focus', async ({ pa
   );
   expect(bodyOverflowsX).toBe(false);
 
+  // The sticky school bar must pin *below* the sticky site header, not at
+  // top:0 where the header covers it and the selected schools are hidden.
+  // Assert the sticky offset directly (robust — no scroll timing needed).
+  const barTop = await page
+    .locator('[class*="schoolBar"]')
+    .first()
+    .evaluate((el) => parseFloat(getComputedStyle(el).top));
+  const headerHeight = await page
+    .locator('[class*="header"]')
+    .first()
+    .evaluate((el) => el.getBoundingClientRect().height);
+  expect(barTop).toBeGreaterThanOrEqual(headerHeight - 1);
+
   // The trends chart still renders (inside the Explore trends section)…
   const chartCanvas = page.locator('canvas:visible').first();
   await expect(chartCanvas).toBeVisible({ timeout: 15_000 });

nextjs-app/components/ComparisonView.module.css

@@ -80,10 +80,12 @@
 }
 
 /* Sticky school bar — column identity while scrolling; horizontal scroll on
-   narrow screens */
+   narrow screens. Offset by the sticky site header's height (Navigation is
+   position: sticky, top: 0) so this bar pins just below it instead of
+   sliding underneath and being hidden. Header ≈ 65px desktop / 57px mobile. */
 .schoolBar {
   position: sticky;
-  top: 0;
+  top: 65px;
   z-index: 10;
   background: var(--bg-primary, #faf7f2);
   display: flex;
@@ -173,6 +175,11 @@
    pills with short names (matching the mobile mockup) instead of full-width
    cards whose names wrap to several lines. */
 @media (max-width: 640px) {
+  /* The mobile Navigation header is shorter (≈57px). */
+  .schoolBar {
+    top: 57px;
+  }
+
   .schoolChip {
     flex: 0 0 auto;
     min-width: 0;

nextjs-app/components/compare/compareSections.module.css

@@ -55,24 +55,27 @@
 
 .cell {
   display: flex;
-  align-items: center;
+  align-items: baseline;
-  gap: 0.5rem;
+  gap: 0.35rem 0.5rem;
   flex-wrap: wrap;
-  padding: 0.45rem 0;
+  padding: 0.5rem 0;
   border-top: 1px solid var(--border-light);
-  margin-top: 0.45rem;
+  margin-top: 0.5rem;
   font-size: 0.95rem;
 }
 
+/* The school name gets its own full-width line above the value — real
+   school names are long and varied, so a fixed-width name column truncated
+   them ("Our Lady Queen of H…") or crowded the value. */
 .cellTag {
   display: inline-flex;
   align-items: center;
   gap: 0.4rem;
-  width: 5rem;
+  flex-basis: 100%;
-  flex: none;
   font-size: 0.8rem;
   font-weight: 600;
   color: var(--sc, var(--text-secondary));
+  margin-bottom: 0.15rem;
 }
 
 .cellDot {
@@ -92,10 +95,9 @@
 .small {
   display: block;
   flex-basis: 100%;
-  padding-left: 5.5rem;
   font-size: 0.8rem;
   color: var(--text-muted);
-  margin-top: -0.05rem;
+  margin-top: 0;
 }
 
 .chip {
@@ -187,6 +189,7 @@
   display: flex;
   gap: 0.3rem;
   flex-wrap: wrap;
+  flex-basis: 100%;
   margin-top: 0.3rem;
 }
 

nextjs-app/lib/utils.ts

@@ -65,7 +65,7 @@ export function truncate(text: string, maxLength: number): string {
  * "Barclay", "St Mary's Catholic Primary School" → "St Mary's". Falls back to
  * a length-capped truncation for names that don't carry a type suffix.
  */
-export function shortName(name: string, maxLength = 20): string {
+export function shortName(name: string, maxLength = 32): string {
   let s = name
     .replace(
       /\s+(primary|junior|infant|nursery|community|foundation|catholic|academy|school|college)\b.*$/i,