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

@@ -28,7 +28,7 @@ import type {
   NationalAverages,
   School,
 } from '@/lib/types';
-import { CHART_COLORS, schoolUrl } from '@/lib/utils';
+import { CHART_COLORS, schoolUrl, shortName } from '@/lib/utils';
 import { fetchComparison } from '@/lib/api';
 import { track } from '@/lib/analytics';
 import styles from './ComparisonView.module.css';
@@ -349,7 +349,8 @@ export function ComparisonView({
                 />
                 <span className={styles.chipText}>
                   <a className={styles.chipName} href={schoolUrl(school.urn, school.school_name)}>
-                    {school.school_name}
+                    <span className={styles.chipNameFull}>{school.school_name}</span>
+                    <span className={styles.chipNameShort}>{shortName(school.school_name)}</span>
                   </a>
                   <span className={styles.chipMeta}>
                     {[school.local_authority, school.school_type].filter(Boolean).join(' · ')}