From 5cdafc887e00024446e6ad4da2036073b2b1097d Mon Sep 17 00:00:00 2001
From: Tudor <tudor@sitaru.org>
Date: Wed, 25 Mar 2026 15:17:45 +0000
Subject: [PATCH] fix(ui): render safeguarding as a standard metric card for
 visual consistency

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

diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index 086533c..0d6b963 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/nextjs-app/components/SchoolDetailView.module.css
@@ -482,18 +482,7 @@
 .rcGrade4 { background: rgba(249, 115, 22, 0.12); color: #c2410c; }                        /* Needs attention */
 .rcGrade5 { background: rgba(224, 114, 86, 0.15); color: var(--accent-coral, #e07256); }   /* Urgent improvement */
 
-/* Safeguarding badge */
-.safeguardingRow {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-.safeguardingLabel {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--text-primary, #1a1612);
-}
+/* Safeguarding value (used inside a standard metricCard) */
 .safeguardingMet {
   display: inline-block;
   padding: 0.2rem 0.6rem;
diff --git a/nextjs-app/components/SchoolDetailView.tsx b/nextjs-app/components/SchoolDetailView.tsx
index 10a60ab..cd5dbfe 100644
--- a/nextjs-app/components/SchoolDetailView.tsx
+++ b/nextjs-app/components/SchoolDetailView.tsx
@@ -220,15 +220,15 @@ export function SchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              {ofsted.rc_safeguarding_met != null && (
-                <div className={styles.safeguardingRow}>
-                  <span className={styles.safeguardingLabel}>Safeguarding</span>
-                  <span className={ofsted.rc_safeguarding_met ? styles.safeguardingMet : styles.safeguardingNotMet}>
-                    {ofsted.rc_safeguarding_met ? 'Met' : 'Not met'}
-                  </span>
-                </div>
-              )}
               <div className={styles.metricsGrid}>
+                {ofsted.rc_safeguarding_met != null && (
+                  <div className={styles.metricCard}>
+                    <div className={styles.metricLabel}>Safeguarding</div>
+                    <div className={`${styles.metricValue} ${ofsted.rc_safeguarding_met ? styles.safeguardingMet : styles.safeguardingNotMet}`}>
+                      {ofsted.rc_safeguarding_met ? 'Met' : 'Not met'}
+                    </div>
+                  </div>
+                )}
                 {RC_CATEGORIES.map(({ key, label }) => {
                   const value = ofsted[key] as number | null;
                   return value != null ? (