From c40a6a949c065afb6d87ce9fa1d67bf989538a0f Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Tue, 30 Jun 2026 16:07:54 +0100
Subject: [PATCH] =?UTF-8?q?feat(admissions):=20replace=20sparse=20Q&A=20li?=
 =?UTF-8?q?st=20with=202=C3=972=20stat=20tiles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The "How Hard to Get Into This School" this-year view rendered four
question/answer rows stretched to fill the trend chart's height, leaving
tall gaps and a long horizontal jump from a small muted question to its
number. Replace with a 2×2 grid of stat tiles — each number paired with
its label directly beneath — so the panel reads quickly and fills the
reserved height without artificial spacing.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../components/SchoolDetailView.module.css    | 92 +++++++++----------
 nextjs-app/components/SchoolDetailView.tsx    | 30 +++---
 2 files changed, 61 insertions(+), 61 deletions(-)

diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 9c03702..c963585 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -1203,55 +1203,58 @@
 }
 
 /* ── Admissions Q&A list ── */
-.admissionsQa {
+/* 2×2 stat tiles — number and label grouped together so the eye
+   doesn't travel the full card width. Hairline grid via gap + bg. */
+.admissionsTiles {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1px;
+    background: var(--border-color, #e5dfd5);
+    border: 1px solid var(--border-color, #e5dfd5);
+    border-radius: 10px;
+    overflow: hidden;
+    margin: 0;
+}
+
+.admissionsTile {
+    background: var(--bg-card, #fff);
+    padding: 1.15rem 1.25rem;
     display: flex;
     flex-direction: column;
-    margin: 0;
 }
 
-.admissionsQaRow {
-    display: flex;
-    justify-content: space-between;
-    align-items: baseline;
-    padding: 0.85rem 0;
-    border-bottom: 1px solid var(--border-color, #e5dfd5);
-    gap: 1rem;
-}
-
-.admissionsQaRow:first-child {
-    padding-top: 0.35rem;
-}
-
-.admissionsQaRow:last-child {
-    border-bottom: none;
-    padding-bottom: 0.35rem;
-}
-
-.admissionsQaQuestion {
-    font-size: 0.92rem;
-    color: var(--text-secondary, #5c564d);
-    line-height: 1.35;
-    margin: 0;
-}
-
-.admissionsQaAnswer {
+.admissionsTileNum {
     font-family: var(--font-playfair), "Playfair Display", Georgia, serif;
-    font-size: 1.4rem;
+    font-size: 2.4rem;
     font-weight: 700;
-    color: var(--text-primary, #1a1612);
     line-height: 1;
-    white-space: nowrap;
-    flex-shrink: 0;
+    color: var(--text-primary, #1a1612);
     font-variant-numeric: tabular-nums;
     margin: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 0.4rem;
+    flex-wrap: wrap;
 }
 
-.admissionsQaAnswerSub {
-    font-size: 0.7rem;
+.admissionsTileSub {
+    font-family: var(--font-dm-sans), "DM Sans", sans-serif;
+    font-size: 0.85rem;
     font-weight: 500;
     color: var(--text-muted, #6d685f);
-    margin-left: 0.35rem;
-    font-family: var(--font-dm-sans), "DM Sans", sans-serif;
+}
+
+.admissionsTileLabel {
+    margin: 0.55rem 0 0;
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--text-muted, #6d685f);
+}
+
+.admissionsTileAccent .admissionsTileNum {
+    color: var(--accent-coral-dark, #c45a3f);
 }
 
 .admissionsVerdict {
@@ -1283,15 +1286,12 @@
 }
 
 @media (max-width: 480px) {
-    .admissionsQaRow {
-        flex-direction: column;
-        align-items: flex-start;
-        gap: 0.25rem;
-        padding: 0.7rem 0;
+    .admissionsTile {
+        padding: 0.95rem 1rem;
     }
 
-    .admissionsQaAnswer {
-        white-space: normal;
+    .admissionsTileNum {
+        font-size: 2rem;
     }
 }
 
@@ -1361,15 +1361,15 @@
     pointer-events: none;
 }
 
-/* The this-year rows spread to fill the height reserved by the taller view. */
+/* The tile grid fills the height reserved by the taller (trend) view. */
 .admissionsViewYear {
     display: flex;
     flex-direction: column;
 }
 
-.admissionsViewYear .admissionsQa {
+.admissionsViewYear .admissionsTiles {
     flex: 1;
-    justify-content: space-between;
+    grid-template-rows: 1fr 1fr;
 }
 
 .admissionsChartCap {
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index 7a37e36..5ac6716 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -905,40 +905,40 @@ export function SchoolDetailView({
           <div className={styles.admissionsViewport}>
             {/* This-year Q&A */}
             <div className={styles.admissionsViewYear} hidden={showAdmissionsTrend && admissionsView !== 'year'}>
-              <dl className={styles.admissionsQa}>
+              <dl className={styles.admissionsTiles}>
                 {admissions.places_offered != null && (
-                  <div className={styles.admissionsQaRow}>
-                    <dt className={styles.admissionsQaQuestion}>How many places were offered?</dt>
-                    <dd className={styles.admissionsQaAnswer}>{admissions.places_offered}</dd>
+                  <div className={styles.admissionsTile}>
+                    <dd className={styles.admissionsTileNum}>{admissions.places_offered}</dd>
+                    <dt className={styles.admissionsTileLabel}>Places offered</dt>
                   </div>
                 )}
                 {admissions.first_preference_applications != null && (
-                  <div className={styles.admissionsQaRow}>
-                    <dt className={styles.admissionsQaQuestion}>How many families wanted this school first?</dt>
-                    <dd className={styles.admissionsQaAnswer}>{admissions.first_preference_applications}</dd>
+                  <div className={styles.admissionsTile}>
+                    <dd className={styles.admissionsTileNum}>{admissions.first_preference_applications}</dd>
+                    <dt className={styles.admissionsTileLabel}>Wanted it first</dt>
                   </div>
                 )}
                 {admissions.first_preference_offer_pct != null && (
-                  <div className={styles.admissionsQaRow}>
-                    <dt className={styles.admissionsQaQuestion}>How many got their first choice?</dt>
-                    <dd className={styles.admissionsQaAnswer}>
+                  <div className={`${styles.admissionsTile} ${styles.admissionsTileAccent}`}>
+                    <dd className={styles.admissionsTileNum}>
                       {admissions.first_preference_offers != null && admissions.first_preference_applications != null ? (
                         <>
                           {admissions.first_preference_offers}
-                          <span className={styles.admissionsQaAnswerSub}>
-                            of {admissions.first_preference_applications} ({formatPercentage(admissions.first_preference_offer_pct)})
+                          <span className={styles.admissionsTileSub}>
+                            of {admissions.first_preference_applications} · {formatPercentage(admissions.first_preference_offer_pct)}
                           </span>
                         </>
                       ) : (
                         formatPercentage(admissions.first_preference_offer_pct)
                       )}
                     </dd>
+                    <dt className={styles.admissionsTileLabel}>Got their first choice</dt>
                   </div>
                 )}
                 {admissions.total_applications != null && (
-                  <div className={styles.admissionsQaRow}>
-                    <dt className={styles.admissionsQaQuestion}>How many applied in total?</dt>
-                    <dd className={styles.admissionsQaAnswer}>{admissions.total_applications.toLocaleString()}</dd>
+                  <div className={styles.admissionsTile}>
+                    <dd className={styles.admissionsTileNum}>{admissions.total_applications.toLocaleString()}</dd>
+                    <dt className={styles.admissionsTileLabel}>Applied in total</dt>
                   </div>
                 )}
               </dl>