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/CompareCommunity.tsx

@@ -9,7 +9,7 @@
 
 import { verdict } from '@/lib/compareLogic';
 import type { Benchmarks, ComparisonData, 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';
 
 function pctSplit(part: number | null | undefined, total: number | null | undefined): string | null {
   if (part == null || total == null || total === 0) return null;
@@ -48,7 +48,7 @@ export function CompareCommunity({
       how="The school's community, from the latest school census. State-school averages are computed from our dataset and shown for context — there's no “right” number here."
     >
       <SectionGrid schools={schools}>
-        <RowLabel>Pupils on roll</RowLabel>
+        <Measure label="Pupils on roll">
         {schools.map((school, i) => {
           const info = data[String(school.urn)]?.school_info as (School & { gias_total_pupils?: number | null; capacity?: number | null }) | undefined;
           const census = data[String(school.urn)]?.census;
@@ -74,8 +74,9 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel>Girls / boys</RowLabel>
+        <Measure label="Girls / boys">
         {schools.map((school, i) => {
           const census = data[String(school.urn)]?.census;
           const girls = pctSplit(census?.female_pupils, census?.total_pupils);
@@ -86,10 +87,12 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel tip="% of pupils eligible for free school meals — a common measure of how many pupils come from lower-income families. Benchmark computed across state schools in our dataset.">
-          Free school meals
-        </RowLabel>
+        <Measure
+          tip="% of pupils eligible for free school meals — a common measure of how many pupils come from lower-income families. Benchmark computed across state schools in our dataset."
+          label="Free school meals"
+        >
         {schools.map((school, i) => {
           const fsm = data[String(school.urn)]?.census?.fsm_pct ?? null;
           return (
@@ -104,10 +107,12 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel tip="% of pupils whose first language is known or believed to be other than English. State-school average computed from our dataset.">
-          English as an additional language
-        </RowLabel>
+        <Measure
+          tip="% of pupils whose first language is known or believed to be other than English. State-school average computed from our dataset."
+          label="English as an additional language"
+        >
         {schools.map((school, i) => {
           const eal = data[String(school.urn)]?.census?.eal_pct ?? null;
           return (
@@ -116,10 +121,12 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel tip="% of pupils receiving SEN support (not including EHC plans). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign. State-school average computed from our dataset.">
-          Extra learning support (SEN)
-        </RowLabel>
+        <Measure
+          tip="% of pupils receiving SEN support (not including EHC plans). A high figure can mean the school hosts specialist provision — often a strength, not a warning sign. State-school average computed from our dataset."
+          label="Extra learning support (SEN)"
+        >
         {schools.map((school, i) => {
           const rows = data[String(school.urn)]?.yearly_data ?? [];
           let sen: number | null = null;
@@ -143,8 +150,9 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel>Faith character</RowLabel>
+        <Measure label="Faith character">
         {schools.map((school, i) => {
           const info = data[String(school.urn)]?.school_info;
           const faith = info?.religious_denomination;
@@ -155,8 +163,9 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel>Ages</RowLabel>
+        <Measure label="Ages">
         {schools.map((school, i) => {
           const info = data[String(school.urn)]?.school_info;
           return (
@@ -165,8 +174,9 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
 
-        <RowLabel>Run by</RowLabel>
+        <Measure label="Run by">
         {schools.map((school, i) => {
           const info = data[String(school.urn)]?.school_info;
           const trust = info?.trust_name;
@@ -177,6 +187,7 @@ export function CompareCommunity({
             </Cell>
           );
         })}
+        </Measure>
       </SectionGrid>
     </Section>
   );