fix(rankings): long metric labels wrap instead of widening the table

Table auto-layout sizes columns by unwrapped header text, so labels like
'Reading, Writing & Maths Combined Higher %' pushed the value column —
and the table — past the viewport. The label now renders inside a block
span capped at 110px (84px on phones), forcing multiline and keeping the
table fully in view at any metric.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

nextjs-app/components/RankingsView.module.css

@@ -187,6 +187,18 @@
   text-align: center;
 }
 
+/* Table auto-layout sizes columns by the unwrapped text, so a long metric
+   label ("Reading, Writing & Maths Combined Higher %") widened the table
+   past the viewport. A block inner span is what actually caps the measured
+   width and forces the label onto multiple lines. */
+.valueHeaderText {
+  display: block;
+  max-width: 110px;
+  margin: 0 auto;
+  white-space: normal;
+  line-height: 1.2;
+}
+
 .actionHeader {
   width: 120px;
   text-align: center;
@@ -411,7 +423,7 @@
   }
 
   /* Long metric labels like "Reading, Writing & Maths Combined %" used to
-     force the whole column wide; let them wrap onto 2 short lines with a
+     force the whole column wide; let them wrap onto short lines with a
      tighter font so the value cell can stay compact. */
   .valueHeader {
     font-size: 0.625rem;
@@ -420,6 +432,10 @@
     letter-spacing: 0.03em;
   }
 
+  .valueHeaderText {
+    max-width: 84px;
+  }
+
   .rankHeader {
     width: 40px;
   }

nextjs-app/components/RankingsView.tsx

@@ -233,7 +233,11 @@ export function RankingsView({
                   <th className={styles.schoolHeader}>School</th>
                   <th className={styles.areaHeader}>Area</th>
                   <th className={styles.typeHeader}>Type</th>
-                  <th className={styles.valueHeader}>{metricLabel}</th>
+                  <th className={styles.valueHeader}>
+                    {/* Inner block caps the column's measured width so long
+                        labels wrap instead of widening the table off-screen. */}
+                    <span className={styles.valueHeaderText}>{metricLabel}</span>
+                  </th>
                   <th className={styles.actionHeader}>Action</th>
                 </tr>
               </thead>