Merge pull request 'fix(detail): align Ofsted Report Card grade chips' (#71) from fix/report-card-chip-alignment into main

Reviewed-on: #71

nextjs-app/components/SchoolDetailView.module.css

@@ -1040,6 +1040,41 @@
     color: var(--accent-coral-dark, #b04a2e);
 }
 
+/* ── Ofsted grade grids (Report Card + OEIF) ──
+   Uniform, vertically-aligned grade chips. Labels reserve two lines so
+   single- and double-line labels put their chips on the same baseline;
+   every chip (Met, Strong, Expected standard, …) shares one font size,
+   padding and min-height regardless of how many lines its text wraps to. */
+.gradeGrid .metricCard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.85rem 0.75rem;
+}
+.gradeGrid .metricLabel {
+    min-height: 2.6em;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+.gradeGrid .metricValue {
+    margin-top: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    min-height: 2.6em;
+    padding: 0.3rem 0.7rem;
+    border-radius: 5px;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25;
+    text-align: center;
+}
+
 .ofstedDisclaimer {
     font-size: 0.8rem;
     color: var(--text-muted, #8a847a);

nextjs-app/components/SchoolDetailView.tsx

@@ -577,7 +577,7 @@ export function SchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              <div className={styles.metricsGrid}>
+              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
                 {ofsted.rc_safeguarding_met != null && (
                   <div className={styles.metricCard}>
                     <div className={styles.metricLabel}>Safeguarding</div>
@@ -623,7 +623,7 @@ export function SchoolDetailView({
                   Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness!]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                 </p>
               ) : (
-                <div className={styles.metricsGrid}>
+                <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
                   {oeifAreas.map(({ label, value }) => (
                     <div key={label} className={styles.metricCard}>
                       <div className={styles.metricLabel}>{label}</div>

nextjs-app/components/SecondarySchoolDetailView.module.css

@@ -623,6 +623,41 @@
     color: var(--accent-coral-dark, #b04a2e);
 }
 
+/* ── Ofsted grade grids (Report Card + OEIF) ──
+   Uniform, vertically-aligned grade chips. Labels reserve two lines so
+   single- and double-line labels put their chips on the same baseline;
+   every chip (Met, Strong, Expected standard, …) shares one font size,
+   padding and min-height regardless of how many lines its text wraps to. */
+.gradeGrid .metricCard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.85rem 0.75rem;
+}
+.gradeGrid .metricLabel {
+    min-height: 2.6em;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+.gradeGrid .metricValue {
+    margin-top: auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    min-height: 2.6em;
+    padding: 0.3rem 0.7rem;
+    border-radius: 5px;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.25;
+    text-align: center;
+}
+
 .ofstedDisclaimer {
     font-size: 0.8rem;
     color: var(--text-muted, #8a847a);

nextjs-app/components/SecondarySchoolDetailView.tsx

@@ -374,7 +374,7 @@ export function SecondarySchoolDetailView({
               <p className={styles.ofstedDisclaimer}>
                 From November 2025, Ofsted replaced single overall grades with Report Cards rating schools across several areas.
               </p>
-              <div className={styles.metricsGrid}>
+              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
                 {ofsted.rc_safeguarding_met != null && (
                   <div className={styles.metricCard}>
                     <div className={styles.metricLabel}>Safeguarding</div>
@@ -419,7 +419,7 @@ export function SecondarySchoolDetailView({
                   Rated <strong>{OFSTED_LABELS[ofsted.overall_effectiveness]}</strong> across all inspected areas — Quality of Teaching, Behaviour, Pupils&apos; Development and Leadership.
                 </p>
               ) : (
-                <div className={styles.metricsGrid}>
+                <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
                   {oeifAreas.map(({ label, value }) => (
                     <div key={label} className={styles.metricCard}>
                       <div className={styles.metricLabel}>{label}</div>
@@ -436,7 +436,7 @@ export function SecondarySchoolDetailView({
               <p className={styles.sectionSubtitle}>
                 From September 2024, Ofsted no longer gives a single overall grade.
               </p>
-              <div className={styles.metricsGrid}>
+              <div className={`${styles.metricsGrid} ${styles.gradeGrid}`}>
                 {[
                   { label: 'Quality of Education', value: ofsted.quality_of_education },
                   { label: 'Behaviour & Attitudes', value: ofsted.behaviour_attitudes },