Let the tab bar fit however many tabs there are #21

2026-09-21T09:18:43Z

niklas commented

2026-09-21 09:18:43 +00:00

Reported: the bottom tabs don't fit the width on a phone.

The cause is a hardcoded number, not tight spacing

display: grid; grid-template-columns: repeat(4, 1fr);

Written when there were four tabs. Team (v0.14.0) and Admin (v0.13.0) arrived since and nothing updated it, so six items were being laid into four columns.

grid-auto-flow: column with grid-auto-columns: 1fr makes the count follow the markup. That also handles something a fixed number can't: Admin only renders for an administrator, so the tab count genuinely differs between two people looking at the same install.

Then the compactness

min-width: 0 on each link, so a column may shrink below its label's natural width.
The label ellipsises instead of widening the bar.
Under 420px: font 11px → 10px, icons 24px → 21px, badge shrunk to match.

No icon-only breakpoint

I wrote one, then worked out the widths and deleted it. Six tabs on a 320px phone give about 53px each; 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 gets a longer name.

The links gained aria-labels regardless — the icons are aria-hidden, so the visible text was the accessible name and shouldn't 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.

Verified

make fmt lint test helm-lint green. Not verified on a phone — I can't open a browser here, so this is the cause identified from the CSS and the widths worked out on paper. Worth a look at 320px and 390px in device emulation before merging, and I'd want to know if On-call still ellipsises.

https://claude.ai/code/session_01RHPj4ggeFdEjKKfm4SHbD7

Reported: the bottom tabs don't fit the width on a phone. ### The cause is a hardcoded number, not tight spacing ```css display: grid; grid-template-columns: repeat(4, 1fr); ``` Written when there were four tabs. **Team** (v0.14.0) and **Admin** (v0.13.0) arrived since and nothing updated it, so six items were being laid into four columns. `grid-auto-flow: column` with `grid-auto-columns: 1fr` makes the count follow the markup. That also handles something a fixed number can't: Admin only renders for an administrator, so the tab count genuinely differs between two people looking at the same install. ### Then the compactness - `min-width: 0` on each link, so a column may shrink below its label's natural width. - The label ellipsises instead of widening the bar. - Under 420px: font 11px → 10px, icons 24px → 21px, badge shrunk to match. ### No icon-only breakpoint I wrote one, then worked out the widths and deleted it. Six tabs on a 320px phone give about 53px each; 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 gets a longer name. The links gained `aria-label`s regardless — the icons are `aria-hidden`, so the visible text was the accessible name and shouldn't 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. ### Verified `make fmt lint test helm-lint` green. **Not verified on a phone** — I can't open a browser here, so this is the cause identified from the CSS and the widths worked out on paper. Worth a look at 320px and 390px in device emulation before merging, and I'd want to know if `On-call` still ellipsises. https://claude.ai/code/session_01RHPj4ggeFdEjKKfm4SHbD7

niklas added 1 commit 2026-09-21 09:18:44 +00:00

Let the tab bar fit however many tabs there are

CI / chart (pull_request) Successful in 2s

Details

CI / security (pull_request) Successful in 17s

Details

CI / test (pull_request) Successful in 2m33s

Details

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

niklas merged commit 0677e74cf8 into main

2026-09-21 09:23:31 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: niklas/terdut-server#21