Three-tier responsive system for the navigation bar:
Structure:
- Each label+select pair wrapped in .ctl-group (inline-flex,
white-space:nowrap) so they never split across rows.
- Separators gain flex-shrink:0;align-self:center for stability.
Breakpoints:
- Default: single row, all controls + hint visible, compact 8px gap
- ≤900px: hint text hidden (first sacrifice for space)
- ≤700px: separators hidden, tighter gaps/padding, smaller fonts
- ≤500px: ultra-compact — min select widths, smaller brand
CSS changes:
- height → min-height so bar grows vertically when wrapping
- flex-wrap:wrap enables natural multi-row flow
- row-gap:4px keeps wrapped rows visually connected
- Separators hidden on narrow screens (gap provides spacing)
Co-Authored-By: Claude <noreply@anthropic.com>
KenanZhuandClaude
112a061fde