Redesign mobile nav bar

Grandiras commented

2026-08-27 03:05:23 +00:00

Owner

Too many important things are hidden in the main menu and to much precious space remains unused.

claude-bot was assigned by Grandiras

2026-08-27 03:05:23 +00:00

claude-bot commented

2026-08-27 03:05:27 +00:00

Collaborator

🤖 On it — follow along in the action run; the reply will link the full session transcript.

📜 Live transcript — updating every ~5 minutes while the task runs.

🤖 On it — follow along in [the action run](https://git.grandiras.net/Grandiras/claude-bot/actions/runs/407); the reply will link the full session transcript.  📜 [Live transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/issue-179/run-407.md) — updating every ~5 minutes while the task runs.

claude-bot referenced this issue from a commit

2026-08-27 03:35:59 +00:00

Redesign the phone nav bar into four destinations

claude-bot referenced this issue from a pull request that will close it,

2026-08-27 03:36:32 +00:00

Claude: changes for issue #179 #180

claude-bot commented

2026-08-27 03:36:33 +00:00

Collaborator

Pushed to claude/issue-179.

The complaint was both halves of one thing. The bar on the bottom edge held a wordmark, the board's name and a magnifier — with most of the widest slot on the device empty — while Board and Calendar, the two readings every member actually came for, were two taps down inside the account sheet, behind a face.

The bar is now four destinations — Board · Calendar · Search · account — each a mark with its word under it, sharing whatever the board switcher leaves.

What moved out of the bar, and why each one:

The wordmark. Its href is BoardHref(ActiveBoardId, "/board") — literally where the Board tab goes. Keeping it would spend the bar's widest cell on a second copy of the tab beside it.
A sole board's name. With one board it is .nav-board-title, a title rather than a button: the one thing in the bar that cannot be pressed, in the widest slot there is, answering a question a single-board deployment has no second answer to. Where there is a choice, the switcher stays, wears a surface (there is no hover on a finger) and takes up to 42% of the bar before its name ellipses.
The search's filled pill and the account's caret. The pill existed because a bare glyph among surfaces reads as the row's decoration; in a row of four labelled marks there is nothing for it to be decoration of, and a filled cell among four bare ones would read as the tab you are on. The caret said "this opens something" for a face that had no other way to say it — the word does that now.

The four cells are flex: 1 1 0, not 1 1 auto: an auto basis would give "Calendar" a wider target than "Board" for no reason a thumb cares about. .nav-tabs is in the DOM at every width and hidden by CSS, unlike the menu's phone group — _isPhone is a round trip, and a bar that rearranges itself after the page has painted is worse than one that never moved. The account's face is 20px like the other three marks, so every cell's word sits on one line.

What the account sheet keeps is what only it can hold: the admin fold (five pages cannot be tabs), what the menu does, the settings, and the way out. The whole "where to go" group is inside the admin policy now — with the views gone, an ordinary member would otherwise get an empty group and its hairline.

Desktop (≥960px) and tablet (600–959px) are untouched — I checked both against screenshots.

Files: NavHeader.razor, SearchBox.razor, app.css (phone block), Changelog.Unreleased (both locales), docs/ui.md, docs/search.md, docs/frontend.md, mobile.spec.js, search.spec.js, boards.spec.js. No new translation keys — the four labels are nav.board, nav.calendar, search.open, nav.menu, all of which already existed in both locales.

Verified: dotnet build and dotnet test green (448 passed, including ChangelogTests and DocumentationTests). Playwright run host-side against a real app + Postgres: mobile.spec.js, search.spec.js, board.spec.js, install.spec.js, profile.spec.js, filter.spec.js, changelog.spec.js, calendar-all.spec.js and the rest of boards.spec.js all pass. New assertions pin that there are four cells, that each is ≥44px and carries a word, that their labels share one baseline, that the row reaches the bar's far edge, that the wordmark is gone, and that the sheet no longer holds the two views.

One thing to flag rather than claim: seven tests failed in my host-side run — six in calendar.spec.js and boards.spec.js:165, all of them the calendar's entrance animation never reaching opacity: 1 — and I confirmed they fail identically on unmodified main in this same environment, so they are not from this change. Two feedback.spec.js failures are the stub forge on :8092, which only the compose stack publishes. I did not file issues for these: I can't tell a host-run artefact from a real regression without the compose stack, and guessing would be speculation.

⏱ 30m 46s · 171 turns · tokens: 244.7k in / 77.4k out (+29341.7k cache-read)
📜 Full session transcript
→ Opened PR: #180

Pushed to `claude/issue-179`. --- ## Redesigned the phone nav bar The complaint was both halves of one thing. The bar on the bottom edge held a wordmark, the board's name and a magnifier — with most of the widest slot on the device empty — while **Board** and **Calendar**, the two readings every member actually came for, were two taps down inside the account sheet, behind a face. The bar is now **four destinations — Board · Calendar · Search · account** — each a mark with its word under it, sharing whatever the board switcher leaves. ![The phone bar before and after: a wordmark, board name and magnifier with an empty middle, versus four labelled destinations filling the row](https://git.grandiras.net/attachments/ca623f21-b5f0-40eb-abc5-07502c1b2b26) **What moved out of the bar, and why each one:** - **The wordmark.** Its href *is* `BoardHref(ActiveBoardId, "/board")` — literally where the Board tab goes. Keeping it would spend the bar's widest cell on a second copy of the tab beside it. - **A sole board's name.** With one board it is `.nav-board-title`, a title rather than a button: the one thing in the bar that cannot be pressed, in the widest slot there is, answering a question a single-board deployment has no second answer to. Where there *is* a choice, the switcher stays, wears a surface (there is no hover on a finger) and takes up to 42% of the bar before its name ellipses. - **The search's filled pill and the account's caret.** The pill existed because a bare glyph among surfaces reads as the row's decoration; in a row of four labelled marks there is nothing for it to be decoration of, and a filled cell among four bare ones would read as the tab you are on. The caret said "this opens something" for a face that had no other way to say it — the word does that now. The four cells are `flex: 1 1 0`, not `1 1 auto`: an `auto` basis would give "Calendar" a wider target than "Board" for no reason a thumb cares about. `.nav-tabs` is in the DOM at every width and hidden by CSS, unlike the menu's phone group — `_isPhone` is a round trip, and a *bar* that rearranges itself after the page has painted is worse than one that never moved. The account's face is 20px like the other three marks, so every cell's word sits on one line. **What the account sheet keeps** is what only it can hold: the admin fold (five pages cannot be tabs), what the menu *does*, the settings, and the way out. The whole "where to go" group is inside the admin policy now — with the views gone, an ordinary member would otherwise get an empty group and its hairline. ![The account sheet before and after: Board and Calendar rows gone, leaving the admin fold, actions, settings and sign out](https://git.grandiras.net/attachments/6ae74823-3983-4531-8027-3f4b7e886ac5) Desktop (≥960px) and tablet (600–959px) are untouched — I checked both against screenshots. **Files:** `NavHeader.razor`, `SearchBox.razor`, `app.css` (phone block), `Changelog.Unreleased` (both locales), `docs/ui.md`, `docs/search.md`, `docs/frontend.md`, `mobile.spec.js`, `search.spec.js`, `boards.spec.js`. No new translation keys — the four labels are `nav.board`, `nav.calendar`, `search.open`, `nav.menu`, all of which already existed in both locales. **Verified:** `dotnet build` and `dotnet test` green (448 passed, including `ChangelogTests` and `DocumentationTests`). Playwright run host-side against a real app + Postgres: `mobile.spec.js`, `search.spec.js`, `board.spec.js`, `install.spec.js`, `profile.spec.js`, `filter.spec.js`, `changelog.spec.js`, `calendar-all.spec.js` and the rest of `boards.spec.js` all pass. New assertions pin that there are four cells, that each is ≥44px and carries a word, that their labels share one baseline, that the row reaches the bar's far edge, that the wordmark is gone, and that the sheet no longer holds the two views. One thing to flag rather than claim: seven tests failed in my host-side run — six in `calendar.spec.js` and `boards.spec.js:165`, all of them the calendar's entrance animation never reaching `opacity: 1` — and I confirmed they fail identically on unmodified `main` in this same environment, so they are not from this change. Two `feedback.spec.js` failures are the stub forge on `:8092`, which only the compose stack publishes. I did not file issues for these: I can't tell a host-run artefact from a real regression without the compose stack, and guessing would be speculation. --- ⏱ 30m 46s · 171 turns · tokens: 244.7k in / 77.4k out (+29341.7k cache-read) 📜 [Full session transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/issue-179/run-407.md) → Opened PR: https://git.grandiras.net/Grandiras/Ponente/pulls/180

phone-menu-before-after.png

689 KiB

phone-bar-before-after.png

272 KiB

Grandiras closed this issue

2026-08-27 03:39:54 +00:00

Grandiras referenced this issue from a commit

2026-08-27 03:39:55 +00:00

Claude: changes for issue #179 (#180)

claude-bot referenced this issue

2026-08-27 04:15:59 +00:00

Publish a new release #176