From a00cbe916182d1e04661c750a1ce2e7ad27a68ae Mon Sep 17 00:00:00 2001
From: Tudor <tudor@Tudors-MacBook-Pro.local>
Date: Mon, 6 Jul 2026 13:23:29 +0100
Subject: [PATCH] fix(search): stop the mobile sort dropdown overflowing the
 viewport

On a location search the results header shows the view toggle and the
sort <select> side by side. The select sizes to its widest option
('Highest Reading, Writing & Maths %', ~273px), so on a phone its right
edge ran ~46px past the viewport and was clipped off-screen.

On mobile let the select flex into the remaining space with min-width:0
so its label truncates instead of overflowing, and keep the view toggle
from shrinking. Verified live at 390px: the select now sits fully within
the viewport.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 nextjs-app/components/HomeView.module.css | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/nextjs-app/components/HomeView.module.css b/nextjs-app/components/HomeView.module.css
index cd55a2f..7b27fdc 100644
--- a/nextjs-app/components/HomeView.module.css
+++ b/nextjs-app/components/HomeView.module.css
@@ -369,6 +369,16 @@
 
   .viewToggle {
     justify-content: center;
+    flex-shrink: 0;
+  }
+
+  /* The sort <select> sizes to its widest option ("Highest Reading, Writing
+     & Maths %"), which overflows a phone viewport — beside the view toggle it
+     ran off the right edge. Let it flex into the remaining space and shrink;
+     the selected label truncates instead of pushing past the screen. */
+  .sortSelect {
+    flex: 1;
+    min-width: 0;
   }
 
   .mapViewContainer {