From 24b3688df0211522e5ce7a8048ea5d4023e906ff Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Wed, 8 Apr 2026 11:04:01 +0100
Subject: [PATCH] polish(school-detail): tighten hero layout and drop redundant
 chip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Drop the "Above national average" chip — the DeltaChip under the 70% /
  Attainment 8 number already carries the same signal, so the chip was
  duplicative and added noise.
- At-a-glance stats: switch from grid(auto-fit) to flex with a fixed
  3rem column gap so the numbers cluster at the start of the row rather
  than spreading across the full width of the header card.
- Add to Compare button: larger padding, bumped font, soft shadow, and
  self-align centre so it sits in balance with the bigger headline
  rather than floating tiny in the top-right corner.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../components/SchoolDetailView.module.css    | 20 ++++++++++---------
 nextjs-app/components/SchoolDetailView.tsx    | 17 ----------------
 2 files changed, 11 insertions(+), 26 deletions(-)

diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 4456fb4..aefeeaf 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -87,18 +87,20 @@
   display: flex;
   gap: 0.5rem;
   flex-shrink: 0;
+  align-self: center;
 }
 
 .btnAdd,
 .btnRemove {
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
+  padding: 0.75rem 1.25rem;
+  font-size: 0.9375rem;
   font-weight: 600;
   border: none;
-  border-radius: 6px;
+  border-radius: 8px;
   cursor: pointer;
   transition: all 0.2s ease;
   white-space: nowrap;
+  box-shadow: var(--shadow-soft, 0 2px 8px rgba(26, 22, 18, 0.08));
 }
 
 .btnAdd {
@@ -780,9 +782,9 @@
 
 /* ── Hero at-a-glance stats (A3) ─────────────────────────────────────── */
 .heroStats {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 1.5rem 2rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.25rem 3rem;
   margin-top: 1.5rem;
   padding-top: 1.5rem;
   border-top: 1px solid var(--border-color, #e5dfd5);
@@ -791,8 +793,9 @@
 .heroStat {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 0.35rem;
   min-width: 0;
+  flex: 0 0 auto;
 }
 
 .heroStatNumber {
@@ -861,8 +864,7 @@
   }
 
   .heroStats {
-    grid-template-columns: 1fr 1fr;
-    gap: 1rem;
+    gap: 1rem 1.5rem;
   }
 
   .heroSummary {
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index 5d9b910..18d19d3 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -232,23 +232,6 @@ export function SchoolDetailView({
             </div>
           )}
 
-          {isPrimary && heroRwm != null && heroRwmNat != null && heroRwm > heroRwmNat && (
-            <div className={`${styles.heroChip} ${styles['tone-teal']}`}>
-              <div className={styles.heroChipTitle}>Above national average</div>
-              <div className={styles.heroChipSub}>
-                Reading, Writing &amp; Maths · {Math.round(heroRwm)} vs {Math.round(heroRwmNat)}
-              </div>
-            </div>
-          )}
-
-          {isSecondary && heroAtt8 != null && heroAtt8Nat != null && heroAtt8 > heroAtt8Nat && (
-            <div className={`${styles.heroChip} ${styles['tone-teal']}`}>
-              <div className={styles.heroChipTitle}>Above national average</div>
-              <div className={styles.heroChipSub}>
-                Attainment 8 · {heroAtt8.toFixed(1)} vs {heroAtt8Nat.toFixed(1)}
-              </div>
-            </div>
-          )}
         </div>
 
         {/* At-a-glance stats row */}