On mobile, the results-header sort <select> could run off the right edge of the screen.
Cause
The sort select has no width constraint, so a native <select> sizes to its widest option — "Highest Reading, Writing & Maths %" (~273px). On a location (postcode) search the results-header row shows the view toggle and the sort select together (justify-content: space-between), so the select was pushed right and its edge landed ~46px past a 390px viewport (clipped off-screen).
Reproduced live at 390px: .resultsHeaderActions is 343px wide, the toggle 135px, and the sort select 273px with its right edge at 436px — well past the viewport.
Fix
Inside the existing @media (max-width: 768px) block: let the sort select flex into the remaining space with min-width: 0 (so its label truncates instead of overflowing), and give the view toggle flex-shrink: 0 so it stays intact. Desktop is untouched.
Verified live by injecting the rule: the select shrinks to 196px with its right edge at 359px — fully within the viewport.
On mobile, the results-header sort `<select>` could run off the right edge of the screen.
## Cause
The sort select has no width constraint, so a native `<select>` sizes to its **widest option** — "Highest Reading, Writing & Maths %" (~273px). On a location (postcode) search the results-header row shows the view toggle **and** the sort select together (`justify-content: space-between`), so the select was pushed right and its edge landed ~46px past a 390px viewport (clipped off-screen).
Reproduced live at 390px: `.resultsHeaderActions` is 343px wide, the toggle 135px, and the sort select 273px with its right edge at **436px** — well past the viewport.
## Fix
Inside the existing `@media (max-width: 768px)` block: let the sort select flex into the remaining space with `min-width: 0` (so its label truncates instead of overflowing), and give the view toggle `flex-shrink: 0` so it stays intact. Desktop is untouched.
Verified live by injecting the rule: the select shrinks to 196px with its right edge at 359px — fully within the viewport.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
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>
Small, targeted CSS fix constraining the mobile sort to flex and shrink within its flex container so it no longer overflows the viewport next to the view toggle. Verified against the surrounding CSS and the HomeView.tsx markup — the two elements are flex siblings, so the fix is correctly scoped and low-risk.
✅ No issues found.
## 🤖 AI Code Review (Claude Code)
Small, targeted CSS fix constraining the mobile sort <select> to flex and shrink within its flex container so it no longer overflows the viewport next to the view toggle. Verified against the surrounding CSS and the HomeView.tsx markup — the two elements are flex siblings, so the fix is correctly scoped and low-risk.
✅ No issues found.
tudor
merged commit 1cdcd85e41 into main2026-07-06 12:46:48 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
On mobile, the results-header sort
<select>could run off the right edge of the screen.Cause
The sort select has no width constraint, so a native
<select>sizes to its widest option — "Highest Reading, Writing & Maths %" (~273px). On a location (postcode) search the results-header row shows the view toggle and the sort select together (justify-content: space-between), so the select was pushed right and its edge landed ~46px past a 390px viewport (clipped off-screen).Reproduced live at 390px:
.resultsHeaderActionsis 343px wide, the toggle 135px, and the sort select 273px with its right edge at 436px — well past the viewport.Fix
Inside the existing
@media (max-width: 768px)block: let the sort select flex into the remaining space withmin-width: 0(so its label truncates instead of overflowing), and give the view toggleflex-shrink: 0so it stays intact. Desktop is untouched.Verified live by injecting the rule: the select shrinks to 196px with its right edge at 359px — fully within the viewport.
🤖 Generated with Claude Code
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>🤖 AI Code Review (Claude Code)
Small, targeted CSS fix constraining the mobile sort to flex and shrink within its flex container so it no longer overflows the viewport next to the view toggle. Verified against the surrounding CSS and the HomeView.tsx markup — the two elements are flex siblings, so the fix is correctly scoped and low-risk.
✅ No issues found.