From ed244ef7431fe7c810de7d2713137cfcf8363667 Mon Sep 17 00:00:00 2001
From: Tudor Sitaru <tudor.sitaru@gmail.com>
Date: Tue, 7 Apr 2026 20:29:15 +0100
Subject: [PATCH] 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/app/globals.css                    |  2 ++
 .../components/ComparisonView.module.css      | 24 ++++++++++++-
 nextjs-app/components/FilterBar.tsx           |  2 +-
 nextjs-app/components/RankingsView.module.css | 35 +++++++++++++++----
 .../components/SchoolDetailView.module.css    |  9 ++++-
 nextjs-app/components/SchoolSearchModal.tsx   |  2 +-
 .../SecondarySchoolDetailView.module.css      |  3 +-
 7 files changed, 66 insertions(+), 11 deletions(-)

diff --git a/nextjs-app/app/globals.css b/nextjs-app/app/globals.css
index ae80291..ca6c3d4 100644
--- a/nextjs-app/app/globals.css
+++ b/nextjs-app/app/globals.css
@@ -291,6 +291,8 @@ body {
     max-width: 1400px;
     margin: 0 auto;
     padding: 1.25rem 1.5rem;
+    min-width: 0;
+    overflow-x: clip;
 }
 
 .view {
diff --git a/nextjs-app/components/ComparisonView.module.css b/nextjs-app/components/ComparisonView.module.css
index 0ba918a..b820ad3 100644
--- a/nextjs-app/components/ComparisonView.module.css
+++ b/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 {
diff --git a/nextjs-app/components/FilterBar.tsx b/nextjs-app/components/FilterBar.tsx
index e94c7f0..4535f57 100644
--- a/nextjs-app/components/FilterBar.tsx
+++ b/nextjs-app/components/FilterBar.tsx
@@ -148,7 +148,7 @@ export function FilterBar({ filters, isHero, resultFilters }: FilterBarProps) {
             type="search"
             value={omniValue}
             onChange={(e) => setOmniValue(e.target.value)}
-            placeholder="Search by school or postcode ..."
+            placeholder="School name or postcode"
             className={styles.omniInput}
           />
           <button
diff --git a/nextjs-app/components/RankingsView.module.css b/nextjs-app/components/RankingsView.module.css
index a2c6830..c12c452 100644
--- a/nextjs-app/components/RankingsView.module.css
+++ b/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;
   }
 }
 
diff --git a/nextjs-app/components/SchoolDetailView.module.css b/nextjs-app/components/SchoolDetailView.module.css
index b060fb4..8cc8e33 100644
--- a/nextjs-app/components/SchoolDetailView.module.css
+++ b/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;
diff --git a/nextjs-app/components/SchoolSearchModal.tsx b/nextjs-app/components/SchoolSearchModal.tsx
index 37a03e4..bcedd92 100644
--- a/nextjs-app/components/SchoolSearchModal.tsx
+++ b/nextjs-app/components/SchoolSearchModal.tsx
@@ -91,7 +91,7 @@ export function SchoolSearchModal({ isOpen, onClose }: SchoolSearchModalProps) {
             type="text"
             value={searchTerm}
             onChange={(e) => handleSearchChange(e.target.value)}
-            placeholder="Search by school or postcode ..."
+            placeholder="School name or postcode"
             className={styles.searchInput}
             autoFocus
           />
diff --git a/nextjs-app/components/SecondarySchoolDetailView.module.css b/nextjs-app/components/SecondarySchoolDetailView.module.css
index 1c966a5..f6f6ae4 100644
--- a/nextjs-app/components/SecondarySchoolDetailView.module.css
+++ b/nextjs-app/components/SecondarySchoolDetailView.module.css
@@ -450,8 +450,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;