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>
2026-07-06 13:23:29 +01:00
1 changed files with 10 additions and 0 deletions
@@ -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 {