fix(compare): mobile measure-first cards to match the mockup

The grid sections (At a glance, Ofsted, Getting a place, Who goes there)
collapsed generically on mobile — grey label pills, full names wrapping
to 3 lines, no dots — making the page ~2x the mockup's height and
'significantly different' from the mobile design.

Each measure is now wrapped in a <Measure> that is display:contents on
desktop (so the label + cells still flow into the shared aligned grid,
unchanged) and a white card on mobile with compact [dot][short name]
[value] rows — matching the mobile mockup. The sticky school bar becomes
scrollable short-name pills on mobile too. Adds a shortName() util.

Desktop layout is unchanged (display:contents dissolves the wrapper).
Validated the card mechanism and real content shapes (report-card cell,
badges, %+chip rows) via static previews at both widths.

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

nextjs-app/components/compare/CompareOfsted.tsx

@@ -13,7 +13,7 @@ import {
   type OfstedDisplay,
 } from '@/lib/compareLogic';
 import type { ComparisonData, OfstedInspection, School } from '@/lib/types';
-import { Cell, Chip, RowLabel, Section, SectionGrid, sectionStyles as s } from './sectionShared';
+import { Cell, Chip, Measure, Section, SectionGrid, sectionStyles as s } from './sectionShared';
 
 const GRADE_TONE: Record<number, 'good' | 'warn' | 'bad'> = {
   1: 'good',
@@ -157,14 +157,15 @@ export function CompareOfsted({
       }
     >
       <SectionGrid schools={schools}>
-        <RowLabel>Result</RowLabel>
+        <Measure label="Result">
         {schools.map((school, i) => (
           <Cell key={school.urn} school={school} index={i}>
             <ResultCell display={displays[i]} />
           </Cell>
         ))}
+        </Measure>
 
-        <RowLabel>Inspected</RowLabel>
+        <Measure label="Inspected">
         {schools.map((school, i) => {
           const ofsted = data[String(school.urn)]?.ofsted;
           const age = yearsSince(ofsted?.inspection_date ?? null);
@@ -176,9 +177,12 @@ export function CompareOfsted({
           );
         })}
 
-        <RowLabel tip="Older-style inspections: one rating per judgement area, where published. New-style inspections: the full report card, one rating per area of school life.">
-          Judgement detail
-        </RowLabel>
+        </Measure>
+
+        <Measure
+          tip="Older-style inspections: one rating per judgement area, where published. New-style inspections: the full report card, one rating per area of school life."
+          label="Judgement detail"
+        >
         {schools.map((school, i) => {
           const ofsted = data[String(school.urn)]?.ofsted;
           return (
@@ -196,9 +200,12 @@ export function CompareOfsted({
           );
         })}
 
-        <RowLabel tip="Links to the school's page on ofsted.gov.uk, where all its inspection reports are listed.">
-          Ofsted page
-        </RowLabel>
+        </Measure>
+
+        <Measure
+          tip="Links to the school's page on ofsted.gov.uk, where all its inspection reports are listed."
+          label="Ofsted page"
+        >
         {schools.map((school, i) => {
           const url =
             data[String(school.urn)]?.ofsted?.ofsted_page_url ??
@@ -211,6 +218,7 @@ export function CompareOfsted({
             </Cell>
           );
         })}
+        </Measure>
       </SectionGrid>
     </Section>
   );