Niklas Ye
56b8191a78
The bottom tab bar was grid-template-columns: repeat(4, 1fr), written when there were four tabs. Team and Admin arrived in the last two releases and nothing updated that number, so six items were being laid into four columns -- which on a phone is the reported symptom, tabs that do not fit the width. grid-auto-flow: column with grid-auto-columns: 1fr makes the count follow the markup instead. That also handles a case a fixed number cannot: Admin is only rendered for an administrator, so the tab count genuinely differs between two people looking at the same install. Then the compactness. Each link gets min-width: 0 so a column may shrink below its label's natural width, and the label itself ellipsises rather than widening the bar. Under 420px the font drops to 10px, the icons to 21px and the badge shrinks to match. No icon-only breakpoint. The arithmetic says the labels fit: six tabs on a 320px phone give about 53px each, and the widest label, "On-call", is about 38px at 10px. A media query that never fires is dead code, and the ellipsis is the backstop if a future tab is named something longer. The links gained aria-labels regardless. The icons are aria-hidden, so the visible text was the accessible name, and it should not be the only one. The desktop sidebar is unaffected: it overrides display, padding and font-size itself, so none of the phone rules reach it. Not verified on a phone -- I cannot open a browser here, so this is the cause identified from the CSS and the widths worked out on paper. Claude-Session: https://claude.ai/code/session_01RHPj4ggeFdEjKKfm4SHbD7
