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

@@ -1,5 +1,7 @@
 .container {
   width: 100%;
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* Header Section */
@@ -200,6 +202,8 @@
   margin-bottom: 1rem;
   box-shadow: var(--shadow-soft);
   scroll-margin-top: 6rem;
+  min-width: 0;
+  max-width: 100%;
 }
 
 /* Section Title */
@@ -403,7 +407,9 @@
 /* History Table */
 .tableWrapper {
   overflow-x: auto;
+  max-width: 100%;
   margin-top: 0.5rem;
+  -webkit-overflow-scrolling: touch;
 }
 
 .historicalSubtitle {
@@ -463,8 +469,9 @@
 
 .ofstedGrade {
   display: inline-block;
-  padding: 0.3rem 0.75rem;
+  padding: 0.35rem 0.75rem;
   font-size: 1rem;
+  line-height: 1.4;
   font-weight: 700;
   border-radius: 6px;
   white-space: nowrap;