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
parent 5c39131b50
commit a00cbe9161
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 {