fix(mobile): address iPhone layout issues across rankings, detail, compare

- rankings: hide Type/Action columns on mobile so metric value stays visible;
  ensure filter selects and table wrapper stay within viewport
- school detail: add min-width:0 / max-width:100% containment so internal
  overflow-x wrappers actually clip rather than pushing the page wider;
  explicit line-height on Ofsted grade badges to fix glyph clipping
- compare: sticky first column on the Detailed Comparison table so the Year
  labels remain visible while horizontally scrolling school columns
- search: shorten placeholder to "School name or postcode" so it fits mobile
  input width
- globals: overflow-x:clip safety net on .main wrapper

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

nextjs-app/components/RankingsView.module.css

@@ -1,5 +1,6 @@
 .container {
   width: 100%;
+  min-width: 0;
 }
 
 /* Header */
@@ -93,6 +94,8 @@
 
 .filterSelect {
   flex: 1;
+  min-width: 0;
+  max-width: 100%;
   padding: 0.625rem 1rem;
   font-size: 0.9375rem;
   border: 1px solid var(--border-color, #e5dfd5);
@@ -137,6 +140,8 @@
 
 .tableWrapper {
   overflow-x: auto;
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
 }
 
 .rankingsTable {
@@ -345,7 +350,8 @@
   .filterGroup {
     flex-direction: column;
     align-items: stretch;
-    min-width: 100%;
+    min-width: 0;
+    width: 100%;
   }
 
   .rankingsSection {
@@ -368,13 +374,30 @@
     font-size: 0.875rem;
   }
 
-  .schoolHeader {
-    min-width: 180px;
+  /* Hide less-critical columns on mobile so the metric value stays visible */
+  .typeHeader,
+  .typeCell,
+  .actionHeader,
+  .actionCell {
+    display: none;
   }
 
-  .areaHeader,
-  .typeHeader {
-    min-width: 100px;
+  .schoolHeader {
+    min-width: 140px;
+  }
+
+  .areaHeader {
+    min-width: 80px;
+  }
+
+  .valueHeader,
+  .valueCell {
+    width: auto;
+    min-width: 60px;
+  }
+
+  .rankHeader {
+    width: 40px;
   }
 }