From 56b8191a7834e66313106674070057444c49c9d9 Mon Sep 17 00:00:00 2001 From: Niklas Ye Date: Mon, 21 Sep 2026 11:18:30 +0200 Subject: [PATCH] Let the tab bar fit however many tabs there are 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 --- internal/web/static/app.css | 26 ++++++++++++++++++++++++-- internal/web/static/index.html | 12 ++++++------ 2 files changed, 30 insertions(+), 8 deletions(-) diff --git a/internal/web/static/app.css b/internal/web/static/app.css index 484bcd5..7c759cd 100644 --- a/internal/web/static/app.css +++ b/internal/web/static/app.css @@ -199,7 +199,12 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh /* Bottom tab bar on phones. */ .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; - display: grid; grid-template-columns: repeat(4, 1fr); + /* One column per link, however many there are. This was repeat(4, 1fr) when + there were four tabs; Team and Admin arriving pushed six items into four + columns, which on a phone is how they stopped fitting. Auto columns mean + the next tab cannot break the row either — and Admin is only rendered for + an administrator, so the count genuinely varies between viewers. */ + display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--tabbar-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: color-mix(in srgb, var(--surface) 92%, transparent); @@ -212,8 +217,25 @@ input:focus, textarea:focus { outline: none; border-color: var(--accent); box-sh position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--faint); font-size: 11px; font-weight: 600; + /* min-width lets a column shrink below its label's natural width, which is + what stops six tabs widening the bar past the screen. */ + min-width: 0; padding: 0 2px; } -.nav-link svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } +.nav-label { + max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; +} +.nav-link svg { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } + +/* Narrow phones, where six tabs each get about 55-65px. Tightening is enough: + the widest label, "On-call", is about 38px at this size, so nothing has to + be hidden. The ellipsis above is the backstop if a future tab is named + something longer. */ +@media (max-width: 420px) { + .nav-link { font-size: 10px; gap: 1px; } + .nav-link svg { width: 21px; height: 21px; } + .nav-badge { left: calc(50% + 4px); min-width: 16px; height: 16px; font-size: 10px; line-height: 16px; } +} + .nav-link[aria-current="page"] { color: var(--accent); } .nav-badge { position: absolute; top: 6px; left: calc(50% + 6px); diff --git a/internal/web/static/index.html b/internal/web/static/index.html index 74640cd..873aaec 100644 --- a/internal/web/static/index.html +++ b/internal/web/static/index.html @@ -77,31 +77,31 @@ terdut - + Queue - + On-call - + Alerts - + Team - - + Account