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/ComparisonView.module.css

@@ -301,12 +301,15 @@
 
 .tableWrapper {
   overflow-x: auto;
+  max-width: 100%;
   margin-top: 1rem;
+  -webkit-overflow-scrolling: touch;
 }
 
 .comparisonTable {
   width: 100%;
-  border-collapse: collapse;
+  border-collapse: separate;
+  border-spacing: 0;
   font-size: 0.9375rem;
 }
 
@@ -320,6 +323,7 @@
   font-weight: 600;
   color: var(--text-primary, #1a1612);
   border-bottom: 2px solid var(--border-color, #e5dfd5);
+  background: var(--bg-secondary, #f3ede4);
   white-space: nowrap;
   text-transform: uppercase;
   font-size: 0.75rem;
@@ -331,6 +335,24 @@
   border-bottom: 1px solid var(--border-color, #e5dfd5);
   color: var(--text-secondary, #5c564d);
   text-align: left;
+  background: var(--bg-card, white);
+}
+
+/* Sticky first column (Year) so labels remain visible while scrolling */
+.comparisonTable th:first-child,
+.comparisonTable td:first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  box-shadow: 2px 0 4px -2px rgba(26, 22, 18, 0.08);
+}
+
+.comparisonTable thead th:first-child {
+  z-index: 2;
+}
+
+.comparisonTable tbody tr:hover td:first-child {
+  background: var(--bg-secondary, #f3ede4);
 }
 
 .comparisonTable tbody tr:last-child td {