e2e/tests/journeys.spec.ts

@@ -197,6 +197,14 @@ test('comparing two schools shows the parent-first sections side by side', async
   // Every number gets an anchor: at least one England-average tick or label
   await expect(page.getByText(/England \d+/).first()).toBeVisible();
 
+  // Desktop: the sticky school bar shares the sections' grid template
+  // (200px label rail + one column per school) so chips align with the
+  // columns they label.
+  const barTemplate = await page
+    .locator('[aria-label="Schools in this comparison"]')
+    .evaluate((el) => getComputedStyle(el).gridTemplateColumns);
+  expect(barTemplate).toMatch(/^200px /);
+
   // Ofsted linkout goes to the school's provider page, never a report deep-link
   const ofstedLink = page.getByRole('link', { name: /Ofsted page/i }).first();
   await expect(ofstedLink).toBeVisible();

nextjs-app/components/ComparisonView.module.css

@@ -148,6 +148,27 @@
   text-overflow: ellipsis;
 }
 
+/* Desktop (matches the sections' 761px breakpoint): the bar adopts the same
+   grid template as compareSections' .grid — a 200px row-label rail plus one
+   column per school — so each chip sits exactly over the column it labels.
+   The first chip starts after the empty label rail. */
+@media (min-width: 761px) {
+  .schoolBar {
+    display: grid;
+    grid-template-columns: 200px repeat(var(--school-count, 3), 1fr);
+    gap: 0 0.75rem;
+    overflow-x: visible;
+  }
+
+  .schoolChip {
+    min-width: 0;
+  }
+
+  .schoolChip:first-child {
+    grid-column: 2;
+  }
+}
+
 .chipRemove {
   margin-left: auto;
   border: none;

nextjs-app/components/ComparisonView.tsx

@@ -9,7 +9,7 @@
 
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, type CSSProperties } from 'react';
 import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 import { useComparison } from '@/hooks/useComparison';
 
@@ -342,8 +342,14 @@ export function ComparisonView({
         />
       ) : (
         <>
-          {/* Sticky school bar — column identity while scrolling */}
+          {/* Sticky school bar — column identity while scrolling. On desktop
-          <div className={styles.schoolBar} aria-label="Schools in this comparison">
+              it shares the sections' grid template (via --school-count) so
+              each chip sits exactly over the column it labels. */}
+          <div
+            className={styles.schoolBar}
+            style={{ '--school-count': activeSchools.length } as CSSProperties}
+            aria-label="Schools in this comparison"
+          >
             {activeSchools.map((school, index) => (
               <div
                 key={school.urn}