Improve the multi-board UX

Grandiras commented

2026-08-08 02:21:31 +00:00

Owner

Rework the nav bar and main content to better work with the new multi-board approach - especially on mobile, where the dropdown doesn't work at all...

Grandiras commented

2026-08-14 14:10:07 +00:00

Author

Owner

Explore visual designs for this and then build one.

claude-bot was assigned by Grandiras

2026-08-14 14:10:11 +00:00

claude-bot commented

2026-08-14 14:10:15 +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/223); 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-76/run-223.md) — updating every ~5 minutes while the task runs.

claude-bot referenced this issue from a commit

2026-08-14 15:49:10 +00:00

Make the board the header's title, and the switcher work on a phone

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

2026-08-14 15:49:50 +00:00

Claude: changes for issue #76 #83

claude-bot commented

2026-08-14 15:49:51 +00:00

Collaborator

Pushed to claude/issue-76.

What I found first

I mocked the current header against the real app.css and screenshotted it at four widths. Two concrete failures, both reproducible:

On a phone the header says "Ponente" and nothing else. With four boards, nothing on screen tells you which one you're looking at, and switching means opening the hamburger — where the boards are rows in the same undifferentiated list as Calendar and the five admin pages. Ten identical-looking links, and the one people actually came for looks like a settings page.
Between 600 and 960px the nav overflows and pushes the account and the hamburger off the row entirely. A landscape phone (740px) gets a header with no menu, no sign-out, and the switcher jammed against the wordmark. That's the "doesn't work at all".

Designs explored

Three, mocked and screenshotted at phone/landscape/tablet/desktop:

A — the board is the page title. Brand mark, hairline, then the board name in the display face with a chevron; views and a folded Admin menu on the right.
B — a board tab strip as a second header row. Rejected: spends ~3.25rem of the scarcest axis on a phone, and horizontal tabs stop scaling at about six boards.
C — a phone bottom tab bar. Rejected: it fights the board's own bottom pagination dots and eats dvh from the columns.

I built A.

What it does

The board is the header's title, so a phone finally names it. One board → a plain title, not a button; a long name truncates rather than shoving the header off screen (min-width: 0 on the flex lead — that one line is the 600–960px fix).
The switcher works on every board-scoped route now, not just board and calendar: /admin/access, /admin/columns and /admin/tags too, staying on the page you were on. Admin links carry the board along, so "Columns" from board 3 goes to board 3's columns rather than the default board's.
On a phone it opens as a bottom sheet with a dimmed backdrop — the toggle sits in the top-left corner, the far end of the device from the thumb.
The five admin pages fold into one Admin flyout beside Board/Calendar. That's what makes the row fit again, and it shortens the phone menu to two views plus a headed admin group, with the boards out of it.
Main content: the three board-scoped admin pages had their own <select> answering the same question the switcher now answers — and answering it differently, since the switcher used to claim no board on an admin page. BoardPicker is gone; BoardScope just states which board the page edits.

Verified

dotnet build clean and 165/165 unit tests pass. No container engine here, so I installed Postgres and ran the app locally and drove the real Playwright suite against it — boards, mobile, board, i18n, calendar, filter, prefs, install, icons, entrance, reconnect. boards.spec.js gains the phone case (header names the board; hamburger names no other board; the sheet is measured after its slide-up settles, since mid-animation it's parked below the fold where every assertion is trivially true). board/mobile/i18n/calendar are updated where they asserted the old header — one of them, "admin pages render on tablet", had been passing for the wrong reason, clicking a link in the row behind the open hamburger.

Two failures in my environment reproduce on an unchanged tree and aren't from this change: a calendar six-week-month overflow (font metrics in this container) and an i18n locale-cookie test. Worth a real run on the compose stack before merge, plus access.spec.js/pds.spec.js, which need the PDS I couldn't start here.

One thing the run caught that the compiler didn't: a Razor comment inside a tag's attribute list compiles fine and then throws InvalidCharacterError in the browser, killing the circuit. Fixed, and noted in the file.

⏱ 99m 12s · 250 turns · tokens: 304.8k in / 102.8k out (+49137.8k cache-read)
📜 Full session transcript
→ Opened PR: #83

Pushed to **`claude/issue-76`**. ## What I found first I mocked the current header against the real `app.css` and screenshotted it at four widths. Two concrete failures, both reproducible: - **On a phone the header says "Ponente" and nothing else.** With four boards, nothing on screen tells you which one you're looking at, and switching means opening the hamburger — where the boards are rows in the same undifferentiated list as Calendar and the five admin pages. Ten identical-looking links, and the one people actually came for looks like a settings page. - **Between 600 and 960px the nav overflows and pushes the account and the hamburger off the row entirely.** A landscape phone (740px) gets a header with no menu, no sign-out, and the switcher jammed against the wordmark. That's the "doesn't work at all". ## Designs explored Three, mocked and screenshotted at phone/landscape/tablet/desktop: - **A — the board is the page title.** Brand mark, hairline, then the board name in the display face with a chevron; views and a folded Admin menu on the right. - **B — a board tab strip** as a second header row. Rejected: spends ~3.25rem of the scarcest axis on a phone, and horizontal tabs stop scaling at about six boards. - **C — a phone bottom tab bar.** Rejected: it fights the board's own bottom pagination dots and eats `dvh` from the columns. I built **A**. ## What it does - **The board is the header's title**, so a phone finally names it. One board → a plain title, not a button; a long name truncates rather than shoving the header off screen (`min-width: 0` on the flex lead — that one line *is* the 600–960px fix). - **The switcher works on every board-scoped route now**, not just board and calendar: `/admin/access`, `/admin/columns` and `/admin/tags` too, staying on the page you were on. Admin links carry the board along, so "Columns" from board 3 goes to board 3's columns rather than the default board's. - **On a phone it opens as a bottom sheet** with a dimmed backdrop — the toggle sits in the top-left corner, the far end of the device from the thumb. - **The five admin pages fold into one `Admin` flyout** beside Board/Calendar. That's what makes the row fit again, and it shortens the phone menu to two views plus a headed admin group, with the boards out of it. - **Main content:** the three board-scoped admin pages had their own `<select>` answering the same question the switcher now answers — and answering it differently, since the switcher used to claim no board on an admin page. `BoardPicker` is gone; `BoardScope` just states which board the page edits. ## Verified `dotnet build` clean and **165/165 unit tests** pass. No container engine here, so I installed Postgres and ran the app locally and drove the **real Playwright suite** against it — boards, mobile, board, i18n, calendar, filter, prefs, install, icons, entrance, reconnect. `boards.spec.js` gains the phone case (header names the board; hamburger names no *other* board; the sheet is measured after its slide-up settles, since mid-animation it's parked below the fold where every assertion is trivially true). board/mobile/i18n/calendar are updated where they asserted the old header — one of them, "admin pages render on tablet", had been passing for the wrong reason, clicking a link in the row behind the open hamburger. Two failures in my environment reproduce on an unchanged tree and aren't from this change: a calendar six-week-month overflow (font metrics in this container) and an i18n locale-cookie test. Worth a real run on the compose stack before merge, plus `access.spec.js`/`pds.spec.js`, which need the PDS I couldn't start here. One thing the run caught that the compiler didn't: a Razor comment inside a tag's attribute list compiles fine and then throws `InvalidCharacterError` in the browser, killing the circuit. Fixed, and noted in the file. --- ⏱ 99m 12s · 250 turns · tokens: 304.8k in / 102.8k out (+49137.8k cache-read) 📜 [Full session transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/issue-76/run-223.md) → Opened PR: https://git.grandiras.net/Grandiras/Ponente/pulls/83

Grandiras closed this issue

2026-08-14 15:54:08 +00:00

Grandiras referenced this issue from a commit

2026-08-14 15:54:08 +00:00

Claude: changes for issue #76 (#83)

claude-bot referenced this issue

2026-08-18 13:53:31 +00:00

Let's push out a new release to prod #106