fix(compare): repair the mobile add-school modal

The 'add school' modal passed no title to Modal, so its header held only
the close button — shoved to the far left by justify-content:space-between
in an otherwise-empty bar — while the real title was rendered separately
inside the content. Pass the title to Modal so the header reads title
(left) + close (right), and drop the duplicate in-content heading.

Also: the mobile full-width result button targeted a dead .addButton
selector (the button never had that class), so it rendered inconsistently
— give the button a real module class and full width on mobile, tighten
the stacked cards, and give the bottom sheet a stable min-height so its
empty state isn't a tiny stub.

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

nextjs-app/__tests__/lib/compareChartData.test.ts

@@ -73,6 +73,15 @@ describe('buildCompareChart', () => {
     expect(eng.data[chart.years.indexOf(202122)]).toBe(58.7);
   });
 
+  it('lists England-only years so the component can caption dashed-only stretches', () => {
+    const chart = buildCompareChart(THREE_SCHOOLS, SCHOOL_LIST, 'rwm_expected_pct', {
+      202122: 58.7,
+    });
+    expect(chart.englandOnlyYears).toEqual([202122]);
+    const none = buildCompareChart(THREE_SCHOOLS, SCHOOL_LIST, 'rwm_expected_pct');
+    expect(none.englandOnlyYears).toEqual([]);
+  });
+
   it('flags the unpublished 2021/22 school-level year when England has data but schools do not', () => {
     const withNational = buildCompareChart(THREE_SCHOOLS, SCHOOL_LIST, 'rwm_expected_pct', {
       202122: 58.7,

nextjs-app/__tests__/lib/compareLogic.test.ts

@@ -177,6 +177,16 @@ describe('summariseAdmissions', () => {
     expect(s.chip).toEqual({ tone: 'warn', text: 'Over 1 in 4 first choices missed out' });
   });
 
+  it('60% → "About 1 in 3 first choices missed out"', () => {
+    const s = summariseAdmissions(admissions({ first_preference_offer_pct: 60 }));
+    expect(s.chip).toEqual({ tone: 'warn', text: 'About 1 in 3 first choices missed out' });
+  });
+
+  it('44% (selective-scale demand) → "More than half of first choices missed out"', () => {
+    const s = summariseAdmissions(admissions({ first_preference_offer_pct: 43.69 }));
+    expect(s.chip).toEqual({ tone: 'warn', text: 'More than half of first choices missed out' });
+  });
+
   it('100% → "All first choices offered"', () => {
     const s = summariseAdmissions(admissions({ first_preference_offer_pct: 100 }));
     expect(s.chip).toEqual({ tone: 'good', text: 'All first choices offered' });

nextjs-app/components/ComparisonChart.module.css

@@ -1,16 +1,23 @@
-/* Chart wrapper: chips (mobile) above, canvas filling the rest of the
+/* Chart wrapper: chips (mobile) above, then the canvas, then the gap note.
-   parent .chartContainer, whose fixed height drives Chart.js sizing via
+   The canvas has its OWN definite height (Chart.js needs one for
-   maintainAspectRatio: false. */
+   maintainAspectRatio: false); the chips and the note flow at their natural
+   size around it rather than competing with it for a fixed outer height —
+   so a longer note (e.g. the KS4 gap caption) or a two-row chip legend can
+   never squash the chart. */
 .wrapper {
     display: flex;
     flex-direction: column;
-    height: 100%;
 }
 
 .canvasBox {
     position: relative;
-    flex: 1 1 auto;
+    height: 380px;
-    min-height: 0;
+}
+
+@media (max-width: 640px) {
+    .canvasBox {
+        height: 280px;
+    }
 }
 
 /* School chips: mobile-only legend + tap-to-focus control. Desktop keeps

nextjs-app/components/ComparisonChart.tsx

@@ -38,13 +38,15 @@ interface ComparisonChartProps {
   /** Official England figure per academic year for this metric — renders a
    * dashed grey reference line when provided. */
   nationalByYear?: Record<number, number | null | undefined>;
+  /** KS4 metrics get a different (honest) gap caption than KS2. */
+  isSecondary?: boolean;
 }
 
 // One shape per basket slot (MAX_SCHOOLS = 5) — secondary encoding so
 // converging lines stay tellable apart without relying on hue alone.
 const POINT_STYLES: PointStyle[] = ['circle', 'triangle', 'rect', 'rectRot', 'star'];
 
-export function ComparisonChart({ comparisonData, schools, metric, metricLabel, nationalByYear }: ComparisonChartProps) {
+export function ComparisonChart({ comparisonData, schools, metric, metricLabel, nationalByYear, isSecondary = false }: ComparisonChartProps) {
   const isMobile = useIsMobile();
   const [focusedUrn, setFocusedUrn] = useState<number | null>(null);
 
@@ -168,7 +170,7 @@ export function ComparisonChart({ comparisonData, schools, metric, metricLabel,
         display: true,
         title: {
           display: !isMobile,
-          text: kind === 'percentage' ? 'Percentage (%)' : kind === 'progress' ? 'Progress Score' : 'Value',
+          text: kind === 'percentage' ? 'Percentage (%)' : kind === 'progress' ? 'Progress Score' : 'Score',
           font: {
             size: 12,
             weight: 'bold',
@@ -240,11 +242,23 @@ export function ComparisonChart({ comparisonData, schools, metric, metricLabel,
       <div className={styles.canvasBox}>
         <Line data={chartData} options={options} aria-label={`${metricLabel} comparison chart`} />
       </div>
-      {built.showUnpublished202122Note && (
+      {isSecondary && built.englandOnlyYears.length > 0 ? (
+        // KS4's honest story differs from KS2's: 2019/20–2020/21 school-level
+        // GCSE results weren't published (COVID grading); later years WERE
+        // published by DfE but aren't in our dataset yet.
+        <p className={styles.chartNote}>
+          School-level GCSE figures for 2019/20 and 2020/21 weren&apos;t published (COVID
+          grading), and more recent years aren&apos;t in our dataset yet where lines break — the
+          England average is shown where available.
+        </p>
+      ) : (
+        !isSecondary &&
+        built.showUnpublished202122Note && (
           <p className={styles.chartNote}>
             No national tests were held in 2019/20 and 2020/21 (COVID), and DfE didn&apos;t publish
             school-level figures for 2021/22 — the England average is shown for that year.
           </p>
+        )
       )}
     </div>
   );

nextjs-app/components/ComparisonView.tsx

@@ -365,12 +365,18 @@ export function ComparisonView({
             style={{ '--school-count': activeSchools.length } as CSSProperties}
             aria-label="Schools in this comparison"
           >
-            {/* Fills the 200px label rail on desktop (hidden on mobile). */}
+            {/* Fills the 200px label rail on desktop (hidden on mobile).
+                All-through schools must not be miscounted as "primary
+                schools"/"secondary schools" — mixed baskets get "· primary
+                view" phrasing instead. */}
             <div className={styles.barCaption}>
               <span className={styles.barCaptionEyebrow}>Comparing</span>
               <span className={styles.barCaptionCount}>
-                {activeSchools.length} {comparePhase} school
+                {activeSchools.every((sch) =>
-                {activeSchools.length === 1 ? '' : 's'}
+                  sch.phase?.toLowerCase().includes(comparePhase),
+                )
+                  ? `${activeSchools.length} ${comparePhase} school${activeSchools.length === 1 ? '' : 's'}`
+                  : `${activeSchools.length} schools · ${comparePhase} view`}
               </span>
             </div>
             {activeSchools.map((school, index) => (
@@ -390,7 +396,13 @@ export function ComparisonView({
                     <span className={styles.chipNameShort}>{shortName(school.school_name)}</span>
                   </a>
                   <span className={styles.chipMeta}>
-                    {[school.local_authority, school.school_type].filter(Boolean).join(' · ')}
+                    {[
+                      /all.?through/i.test(school.phase ?? '') ? 'All-through' : null,
+                      school.local_authority,
+                      school.school_type,
+                    ]
+                      .filter(Boolean)
+                      .join(' · ')}
                   </span>
                 </span>
                 <button

nextjs-app/components/Modal.module.css

@@ -123,6 +123,10 @@
   .modal {
     width: 100%;
     max-width: 100%;
+    /* Bottom sheet: open at a stable, comfortable height so the empty
+       "start typing" state isn't a tiny stub and the sheet doesn't jump as
+       results load (the results list scrolls within). */
+    min-height: 55vh;
     max-height: 95vh;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;

nextjs-app/components/SchoolSearchModal.module.css

@@ -2,14 +2,6 @@
   padding: 1.5rem;
 }
 
-.title {
-  font-size: 1.5rem;
-  font-weight: 700;
-  color: var(--text-primary, #1a1612);
-  margin-bottom: 1.5rem;
-  font-family: var(--font-playfair), 'Playfair Display', serif;
-}
-
 .warning {
   background: var(--accent-gold-bg);
   border: 1px solid var(--accent-gold, #c9a227);
@@ -119,12 +111,16 @@
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary, #1a1612);
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
+.resultButton {
+  flex: 0 0 auto;
+}
+
 .schoolMeta {
   display: flex;
   gap: 1rem;
@@ -159,21 +155,21 @@
     padding: 1rem;
   }
 
-  .title {
+  /* Compact stacked card: name + meta, then a full-width action so the tap
-    font-size: 1.25rem;
+     target is obvious and the card doesn't waste vertical space. */
-  }
-
   .resultItem {
     flex-direction: column;
     align-items: stretch;
+    gap: 0.625rem;
+    padding: 0.875rem;
   }
 
-  .addButton {
+  .resultButton {
     width: 100%;
   }
 
   .schoolMeta {
-    flex-direction: column;
+    flex-wrap: wrap;
-    gap: 0.25rem;
+    gap: 0.25rem 1rem;
   }
 }

nextjs-app/components/SchoolSearchModal.tsx

@@ -81,10 +81,8 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={handleClose}>
+    <Modal isOpen={isOpen} onClose={handleClose} title="Add School to Comparison">
       <div className={styles.modalContent}>
-        <h2 className={styles.title}>Add School to Comparison</h2>
-
         {!canAddMore && (
           <div className={styles.warning}>
             Maximum 5 schools can be compared. Remove a school to add another.
@@ -129,9 +127,9 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
                 <button
                   onClick={() => handleAddSchool(school)}
                   disabled={alreadySelected || !canAddMore}
-                  className={
+                  className={`${styles.resultButton} ${
                     alreadySelected ? "btn btn-active" : "btn btn-secondary"
-                  }
+                  }`}
                 >
                   {alreadySelected ? "✓ Comparing" : "+ Compare"}
                 </button>

nextjs-app/components/compare/CompareAcademics.tsx

@@ -148,6 +148,17 @@ export function CompareAcademics({
       }
       return null;
     });
+    // DfE stopped publishing Progress 8 from 2024/25: those GCSE year groups
+    // sat no KS2 tests (COVID), so there is no baseline to measure progress
+    // from. A bare "No data" reads as a gap on our side — say why. Judged
+    // PER SCHOOL on its own latest data year: a school whose data simply
+    // stops earlier (an unrelated gap) must not borrow the COVID explanation
+    // from a neighbour that does have 2024/25 data.
+    const p8NotPublished = urns.map((urn) => {
+      const rows = data[String(urn)]?.yearly_data ?? [];
+      const y = rows.length ? Math.trunc(rows[rows.length - 1].year) : 0;
+      return y >= 202425;
+    });
     const grade5 = latestValues(data, urns, 'english_maths_strong_pass_pct');
     const ebacc = latestValues(data, urns, 'ebacc_entry_pct');
     const att8Anchor = nationalAverages?.secondary?.attainment_8_score;
@@ -189,6 +200,11 @@ export function CompareAcademics({
                 >
                   {banding[i]}
                 </Chip>
+              ) : p8NotPublished[i] ? (
+                <span className={s.small}>
+                  Not published — this GCSE year group sat no KS2 tests (COVID), so DfE has no
+                  baseline to measure progress from
+                </span>
               ) : (
                 <span className={s.small}>No data</span>
               )}
@@ -218,6 +234,24 @@ export function CompareAcademics({
   const national = nationalAverages?.primary;
   const disadvantaged = latestValues(data, urns, 'rwm_expected_disadvantaged_pct');
   const disadvantagedAnchor = benchmarks?.primary?.disadvantaged_rwm_expected_pct ?? null;
+  // Cohort size behind the disadvantaged figure (spec §8.5): these are small
+  // groups where single pupils move the percentage — show roughly how many
+  // pupils the figure rests on. Taken from the SAME yearly row that supplies
+  // the displayed percentage: resolving eligible_pupils and the
+  // disadvantaged share independently could mix years and misstate the
+  // cohort behind the figure.
+  const cohorts = urns.map((urn) => {
+    const rows = data[String(urn)]?.yearly_data ?? [];
+    for (let i = rows.length - 1; i >= 0; i--) {
+      const row = rows[i];
+      if (row.rwm_expected_disadvantaged_pct != null) {
+        if (row.eligible_pupils == null || row.disadvantaged_pct == null) return null;
+        const cohort = Math.round((row.eligible_pupils * row.disadvantaged_pct) / 100);
+        return cohort > 0 ? cohort : null;
+      }
+    }
+    return null;
+  });
 
   return (
     <Section
@@ -270,6 +304,9 @@ export function CompareAcademics({
                     <span className={s.big} style={{ fontSize: '1.1rem' }}>
                       {Math.round(value)}%
                     </span>{' '}
+                    {cohorts[i] != null && (
+                      <span className={s.small}>of ~{cohorts[i]} disadvantaged pupils</span>
+                    )}{' '}
                     {disadvantagedAnchor != null && (
                       <Chip tone={verdict(value, disadvantagedAnchor, 5) === 'below' ? 'warn' : 'good'}>
                         {verdict(value, disadvantagedAnchor, 5) === 'above' &&

nextjs-app/components/compare/CompareAtAGlance.tsx

@@ -170,8 +170,14 @@ export function CompareAtAGlance({
         {schools.map((school, i) => {
           const census = data[String(school.urn)]?.census;
           const pupils = census?.total_pupils ?? school.total_pupils ?? null;
+          // An all-through school's roll covers every age group, so judging
+          // it against the single-phase median ("Much larger than average")
+          // is meaningless — label the roll honestly instead.
+          const isAllThrough = /all.?through/i.test(school.phase ?? '');
           let sizeNote: string | null = null;
-          if (pupils != null && medianPupils != null) {
+          if (isAllThrough) {
+            sizeNote = 'Whole-school roll (all-through, all ages)';
+          } else if (pupils != null && medianPupils != null) {
             if (pupils >= medianPupils * 1.5) sizeNote = 'Much larger than average';
             else if (pupils >= medianPupils * 1.1) sizeNote = 'Larger than average';
             else if (pupils <= medianPupils * 0.66) sizeNote = 'Much smaller than average';

nextjs-app/components/compare/CompareCommunity.tsx

@@ -48,10 +48,25 @@ export function CompareCommunity({
     );
   };
 
+  const anyAllThrough = schools.some((school) => /all.?through/i.test(school.phase ?? ''));
+
   return (
     <Section
       title="Who goes there"
-      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."
+      how={
+        <>
+          The school&apos;s community, from the latest school census. State-school averages are
+          computed from our dataset and shown for context — there&apos;s no &ldquo;right&rdquo;
+          number here.
+          {anyAllThrough && (
+            <>
+              {' '}
+              For all-through schools these figures cover the whole school, all ages — not just
+              the {isSecondary ? 'secondary' : 'primary'} phase.
+            </>
+          )}
+        </>
+      }
     >
       <SectionGrid schools={schools}>
         <Measure label="Pupils on roll">

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

@@ -60,18 +60,10 @@
   margin: 0 0 1rem;
 }
 
-/* ComparisonChart runs Chart.js with maintainAspectRatio:false, so it fills
+/* ComparisonChart owns its own canvas height now (a definite px value per
-   its container's height — which must be *definite*. A min-height alone does
+   breakpoint), with the mobile chip legend above and the gap note below it
-   not resolve the chart wrapper's height:100%, leaving Chart.js to fall back
+   flowing at natural size. This box therefore only needs to not constrain
-   to its ~150px default (a squashed sliver). Give it a real height. */
+   that height — no fixed height, or the note would again eat the plot. */
 .chartBox {
-  height: 420px;
+  min-height: 0;
-}
-
-@media (max-width: 640px) {
-  /* Taller on mobile: the mobile-only school chips sit above the canvas and
-     wrap to two rows for 3+ schools, so the plot keeps a usable height. */
-  .chartBox {
-    height: 360px;
-  }
 }

nextjs-app/components/compare/TrendsExplorer.tsx

@@ -119,6 +119,7 @@ export function TrendsExplorer({
               metric={metric}
               metricLabel={metricLabel}
               nationalByYear={nationalByYear}
+              isSecondary={!isPrimaryPhase}
             />
           </div>
         </div>

nextjs-app/lib/compareChartData.ts

@@ -53,6 +53,10 @@ export interface CompareChart {
   /** True when England published a 2021/22 figure but no school has one —
    * the UI shows: "DfE didn't publish school-level figures for 2021/22". */
   showUnpublished202122Note: boolean;
+  /** Years where the England overlay has a value but no school does — the
+   * chart shows a dashed-line-only stretch that needs explaining (KS2 and
+   * KS4 have different honest explanations, so the component owns the copy). */
+  englandOnlyYears: number[];
 }
 
 export function buildCompareChart(
@@ -92,11 +96,12 @@ export function buildCompareChart(
     }
   }
 
-  const idx202122 = years.indexOf(202122);
+  const englandOnlyYears = years.filter(
-  const showUnpublished202122Note =
+    (year, i) =>
-    idx202122 >= 0 &&
+      englandDataset?.data[i] != null && schoolDatasets.every((ds) => ds.data[i] == null),
-    englandDataset?.data[idx202122] != null &&
+  );
-    schoolDatasets.every((ds) => ds.data[idx202122] == null);
 
-  return { years, schoolDatasets, englandDataset, showUnpublished202122Note };
+  const showUnpublished202122Note = englandOnlyYears.includes(202122);
+
+  return { years, schoolDatasets, englandDataset, showUnpublished202122Note, englandOnlyYears };
 }

nextjs-app/lib/compareLogic.ts

@@ -192,6 +192,12 @@ export function summariseAdmissions(
   if (pct != null) {
     if (pct >= 100) {
       chip = { tone: 'good', text: 'All first choices offered' };
+    } else if (pct < 50) {
+      // Banded, not one blanket chip: "Over 1 in 4" on a school where more
+      // than half missed out understated the worst cases by half.
+      chip = { tone: 'warn', text: 'More than half of first choices missed out' };
+    } else if (pct < 67) {
+      chip = { tone: 'warn', text: 'About 1 in 3 first choices missed out' };
     } else if (pct < 75) {
       chip = { tone: 'warn', text: 'Over 1 in 4 first choices missed out' };
     } else {