Four layout faults seen while checking the footer change: the editor's Save row, Back's scroll position, a second scroller, the phone bell button #1023

New issue

Closed

opened 2026-10-02 01:21:18 +00:00 by claude-bot · 1 comment

claude-bot commented

2026-10-02 01:21:18 +00:00

Collaborator

Seen in the browser check of fix/1020-shell-wordmark-footer-bell (#1020) on 2 October. None is in code that branch changes, so each is believed to be on main already; not yet compared against main, so the first step for each is to confirm it there.

The wiki editor's Save row leaves the screen. .ed-actions is position: sticky; bottom: 0. It sits at the window's bottom when the editor opens, but its sticky container ends part-way down the page, so while editing the lower sections (Stat block, Picture, Relationships) the row has scrolled away: at the end of the page it was 416px above the window at 1440 and 1340px above at 390. A GM editing the lower half has no Save in view. Either the row's container should be the whole editor, or the lower sections belong inside it.
Back returns short on pages that load their content after the route. On a session's Review tab at 1440: scrolled to 1200, followed a link, pressed Back: the page returned to 974, and stayed there. On Admin → Audit log: 700 → Back → 0. At 390 the same session page returned to 1200 correctly. useScrollRestoration sets scrollTop once on the POP; if the page is not yet its full height the value is clamped. It has a MutationObserver for this case, which evidently does not cover these pages.
The window itself scrolls under the frame on some pages. On a session page and the wiki editor document.scrollHeight was 1377 and 1899 at 1440 (window 900), and window.scrollTo(0, 500) really moved the whole app. The cause found: a 1×1 span.sr-only ("The note") that is position: absolute with .app as its offset parent, at y=1376, outside the frame's scroller. An sr-only inside the scroller needs a positioned ancestor inside it, or the frame needs overflow: hidden on .app.
The bell's button is 36px wide at phone width (44px high). Controls are meant to be 44px (--touch).

Also noted, smaller: the footer's last link on a line is followed by a dangling "·" when the footer wraps on a phone; a printed character sheet clips some table cells at the right edge of their cards ("bludgeonin…", "concentra…"); /design's specimen panels overhang the left of a 390px window by 35px.

Refs #1020, #727.

Seen in the browser check of `fix/1020-shell-wordmark-footer-bell` (#1020) on 2 October. None is in code that branch changes, so each is believed to be on main already; **not yet compared against main**, so the first step for each is to confirm it there. 1. **The wiki editor's Save row leaves the screen.** `.ed-actions` is `position: sticky; bottom: 0`. It sits at the window's bottom when the editor opens, but its sticky container ends part-way down the page, so while editing the lower sections (Stat block, Picture, Relationships) the row has scrolled away: at the end of the page it was 416px above the window at 1440 and 1340px above at 390. A GM editing the lower half has no Save in view. Either the row's container should be the whole editor, or the lower sections belong inside it. 2. **Back returns short on pages that load their content after the route.** On a session's Review tab at 1440: scrolled to 1200, followed a link, pressed Back: the page returned to 974, and stayed there. On Admin → Audit log: 700 → Back → 0. At 390 the same session page returned to 1200 correctly. `useScrollRestoration` sets `scrollTop` once on the POP; if the page is not yet its full height the value is clamped. It has a `MutationObserver` for this case, which evidently does not cover these pages. 3. **The window itself scrolls under the frame on some pages.** On a session page and the wiki editor `document.scrollHeight` was 1377 and 1899 at 1440 (window 900), and `window.scrollTo(0, 500)` really moved the whole app. The cause found: a 1×1 `span.sr-only` ("The note") that is `position: absolute` with `.app` as its offset parent, at y=1376, outside the frame's scroller. An `sr-only` inside the scroller needs a positioned ancestor inside it, or the frame needs `overflow: hidden` on `.app`. 4. **The bell's button is 36px wide at phone width** (44px high). Controls are meant to be 44px (`--touch`). Also noted, smaller: the footer's last link on a line is followed by a dangling "·" when the footer wraps on a phone; a printed character sheet clips some table cells at the right edge of their cards ("bludgeonin…", "concentra…"); `/design`'s specimen panels overhang the left of a 390px window by 35px. Refs #1020, #727.

claude-bot referenced this issue

2026-10-02 01:30:01 +00:00

Review R4, the shell: the wordmark goes Home, the footer ends the page, a clicked notification clears (#1020) #1024

claude-bot referenced this issue

2026-10-02 02:18:16 +00:00

Build lane 1: the shell, Home and you (SH-1 to SH-9, HOME-1 to HOME-7) #727

rbrooks referenced this issue from a commit

2026-10-02 03:04:12 +00:00

Editor Save row stays on screen, Back restores late pages, frame contains the window, 44px bar buttons, footer dots (#1023)

claude-bot referenced this issue

2026-10-02 03:29:57 +00:00

Review follow-ups R4: the owner's 1 October pass over lanes 0 to 8 #1020

rbrooks referenced this issue from a commit

2026-10-02 03:32:21 +00:00

The bell's panel no longer scrolls inside itself (#1023)

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

2026-10-02 03:39:46 +00:00

The wiki editor's Save row stays on screen, Back returns to where you were, and the frame stops scrolling under itself (#1023, #1017) #1028

claude-bot referenced this issue

2026-10-02 03:39:50 +00:00

A wiki article's "See it as…" menu hangs off the left of a phone screen #1029

claude-bot referenced this issue from a commit

2026-10-02 04:03:23 +00:00

Merge PR #1028: the wiki editor's Save row stays on screen, Back returns to where you were, and the frame stops scrolling under itself (#1023, #1017)

claude-bot closed this issue

2026-10-02 04:03:23 +00:00

claude-bot commented

2026-10-02 04:03:41 +00:00

Author

Collaborator

Done in PR #1028, merged to main as 9ce5863a (head 271a0526 verified on main, CI green).

The wiki editor's Save row stays on screen while the page scrolls.
Back returns to where you were on a long page: the position is restored once the page is tall enough to reach it (restoreWhenReachable), not cut short while it is still loading.
The window no longer scrolls under the frame: visually hidden text inside menus and the page scroller is contained (.book__scroll, .menu__scroll, .menu__panel are positioned; .menu and .app.qb-frame clip rather than hide), so the bell's panel cannot scroll inside itself either.
The phone bell button is the full 44px.
#1017's flaky sheet test (the temp HP input) is fixed with it.

Checked in a browser at 390×844 and 1440, both themes; full vitest 3710 green.

Follow-ups filed from the browser check: #1029 (a menu hanging off the left of a phone screen).

Done in PR #1028, merged to main as 9ce5863a (head 271a0526 verified on main, CI green). - **The wiki editor's Save row** stays on screen while the page scrolls. - **Back** returns to where you were on a long page: the position is restored once the page is tall enough to reach it (`restoreWhenReachable`), not cut short while it is still loading. - **The window no longer scrolls under the frame**: visually hidden text inside menus and the page scroller is contained (`.book__scroll`, `.menu__scroll`, `.menu__panel` are positioned; `.menu` and `.app.qb-frame` clip rather than hide), so the bell's panel cannot scroll inside itself either. - **The phone bell button** is the full 44px. - #1017's flaky sheet test (the temp HP input) is fixed with it. Checked in a browser at 390×844 and 1440, both themes; full vitest 3710 green. Follow-ups filed from the browser check: #1029 (a menu hanging off the left of a phone screen).