Claude: changes for issue #112 #124

Merged

Grandiras merged 1 commit from claude/issue-112 into main

2026-08-19 17:43:47 +00:00

claude-bot commented

2026-08-19 17:41:12 +00:00

Collaborator

Closes #112.

claude-bot added 1 commit

2026-08-19 17:41:12 +00:00

Put the phone's nav bar on the bottom edge, where its sheets are

CI / build (pull_request) Successful in 37s

Details

00d874ab5d

Both controls in the header open a bottom sheet, and both of them sat at
the top: you reached the far corner of a one-handed device to open
something that then appeared under your thumb, and reached back up to
change your mind. Below 600px `.board-header` is now fixed to the bottom
edge instead — one bar, not a header plus a tab strip, so nothing is
named twice and the same 56px is spent once.

`--phone-nav-h` (56px plus the safe-area inset, because the bar is what
sits in it) is the single number everything that has to stop where the
bar starts subtracts: the board, the calendar page, the column's max
height, the pagination pill, the toasts and both sheets. `body:has(
.board-header)` pads by it for the pages that just scroll — scoped with
`:has()` because sign-in, /signup and /request render no header.

The sheets now stop *at* the bar rather than covering it, so the button
that opened one is never hidden and a second tap on it is the way back
out. That is also why the account menu rises 10px instead of sliding up
from under the bar: it lives inside the header's stacking context, and
nothing inside one can paint below that context's own background, so a
translateY(100%) start would be drawn over the bar. The click-catcher
ends at the bar for the mirror-image reason — at z-index -1 it paints
above the header's background but below its children, so a full-height
dim would tint the bar and leave its buttons crisp on top of the tint.
Both chevrons are rotated: these menus open upward now.

Both sheets keep the top edge they had — the bar's height comes off
their old ceiling rather than being added to it — so the strip of dimmed
board above a sheet, which is the only place left to click to dismiss
it, is the strip it always was.

mobile.spec.js pins the bar on the bottom edge, the board ending exactly
where it starts, the sheet seated on the bar and the toggle closing what
it opened; boards.spec.js does the same for the switcher's sheet.

claude-bot referenced this pull request

2026-08-19 17:41:13 +00:00

Fix mobile navigation behaviour #112

claude-bot commented

2026-08-19 17:41:15 +00:00

Author

Collaborator

🤖 Reviewing this PR — follow along in the action run; the reply will link the full session transcript.

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

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

claude-reviewer approved these changes

2026-08-19 17:43:32 +00:00

claude-reviewer left a comment

✅ Verdict: approve — no blocking issues found.

This moves the phone nav bar from the top-left corner to a fixed bottom bar, so the board switcher and account sheets rise from directly under the toggle that opens them instead of requiring a reach across the device. I traced the CSS carefully for the usual trouble spots in this kind of change and didn't find any:

--phone-nav-h (56px + safe-area-inset-bottom) is threaded consistently through everything that needs to stop at the new bar: the board, the calendar page, the column max-height, the pagination pill, the toasts, body's padding, and both sheets.
The switcher's backdrop div carries both nav-menu-backdrop and nav-boards-backdrop classes (confirmed in NavHeader.razor), so the new inset: 0 0 var(--phone-nav-h) 0 on .nav-menu-backdrop correctly applies to the switcher's dim too, matching the doc's claim that "the switcher's backdrop carries this class too."
.nav-menu's base rule already gates visibility with opacity: 0; visibility: hidden; pointer-events: none;, so changing the closed-state transform from translateY(100%) to translateY(10px) doesn't leave the sheet visibly parked on screen when closed.
The chevron rotation logic (base rule flips 0→180 on expand, phone override flips 180→0) is self-consistent given the menus now open upward instead of downward, and it's scoped inside the max-width: 599px query so it correctly wins over the desktop rule by source order.
The "second tap closes it" claims in the changelog strings and new Playwright assertions match the existing ToggleBoards/ToggleMenu handlers in NavHeader.razor, which are genuine toggles (unmodified by this PR).
The docs/ui.md cross-reference to "The account menu" section in docs/boards-and-permissions.md resolves to a real heading.

New and updated e2e assertions in boards.spec.js and mobile.spec.js look correctly targeted at the new geometry (bar pinned to the viewport bottom, sheets seated flush on top of it, toggle reachable within 20px of the bottom edge). Changelog entries are present in both locales as required. I don't have anything to flag here.

⏱ 2m 4s · 15 turns · tokens: 42.5k in / 10.6k out (+778.7k cache-read)
📜 Full session transcript

✅ **Verdict: approve** — no blocking issues found. This moves the phone nav bar from the top-left corner to a fixed bottom bar, so the board switcher and account sheets rise from directly under the toggle that opens them instead of requiring a reach across the device. I traced the CSS carefully for the usual trouble spots in this kind of change and didn't find any: - `--phone-nav-h` (56px + safe-area-inset-bottom) is threaded consistently through everything that needs to stop at the new bar: the board, the calendar page, the column max-height, the pagination pill, the toasts, `body`'s padding, and both sheets. - The switcher's backdrop div carries both `nav-menu-backdrop` and `nav-boards-backdrop` classes (confirmed in `NavHeader.razor`), so the new `inset: 0 0 var(--phone-nav-h) 0` on `.nav-menu-backdrop` correctly applies to the switcher's dim too, matching the doc's claim that "the switcher's backdrop carries this class too." - `.nav-menu`'s base rule already gates visibility with `opacity: 0; visibility: hidden; pointer-events: none;`, so changing the closed-state transform from `translateY(100%)` to `translateY(10px)` doesn't leave the sheet visibly parked on screen when closed. - The chevron rotation logic (base rule flips 0→180 on expand, phone override flips 180→0) is self-consistent given the menus now open upward instead of downward, and it's scoped inside the `max-width: 599px` query so it correctly wins over the desktop rule by source order. - The "second tap closes it" claims in the changelog strings and new Playwright assertions match the existing `ToggleBoards`/`ToggleMenu` handlers in `NavHeader.razor`, which are genuine toggles (unmodified by this PR). - The `docs/ui.md` cross-reference to "The account menu" section in `docs/boards-and-permissions.md` resolves to a real heading. New and updated e2e assertions in `boards.spec.js` and `mobile.spec.js` look correctly targeted at the new geometry (bar pinned to the viewport bottom, sheets seated flush on top of it, toggle reachable within 20px of the bottom edge). Changelog entries are present in both locales as required. I don't have anything to flag here. --- ⏱ 2m 4s · 15 turns · tokens: 42.5k in / 10.6k out (+778.7k cache-read) 📜 [Full session transcript](https://git.grandiras.net/Grandiras/claude-bot/src/branch/claude-logs/transcripts/Grandiras/Ponente/pr-124/run-305.md)