Put every item in the phone's navigation bar and let it scroll (#912) #1060

Merged

tiagoagueda merged 1 commit from 912-nav-bar-scroll into main

2026-10-27 18:28:48 +00:00

tiagoagueda commented

2026-10-27 15:42:44 +00:00

Owner

Below md the main navigation bar held the first four items and More, which
cost a tap in front of every other item and, where the labels did not fit side
by side (Estonian at 320), put More on a second row. Now the bar holds every
item, in the person's order, on one row: the slots share the width equally
where they fit, each held at its longest word and never under 44 pixels, and
the bar scrolls sideways in its own box where they do not. That reverses
#299's "never scrolled" rule for the bar; the comments in app.css,
nav_links.html and core/navigation.py now say so. The page itself still
never scrolls sideways (SC 1.4.10). From md up More is unchanged.

An end with more past it fades the items out under a sticky pseudo-element,
so the last item in view is cut part way through: a shape as well as a shade.
app.js marks those ends (data-overflow-start / data-overflow-end) as the
bar scrolls and resizes, scrolls the current page's item into view as the page
opens, and scrolls a link reached by Tab clear of the fades
(scroll-padding-inline, SC 2.4.11) by moving the bar, never the page.
--bottom-bar-height is still measured.

The help text on Settings -> Appearance said the bar held "the first four";
it now says the bar holds them all and scrolls.

Tests: the markup (every item a link of the nav, in order, More kept for the
row), the built stylesheet below md (one row, overflow-x auto, More hidden,
no counts, the fades) and the script's hooks; in the browser, at 320 in
English and Estonian, one row that scrolls with the fade at the right end, the
current item in view on load, each link reached by Tab in view, and More
absent below md and present from it. The reflow walk's bar test and the
existing bar tests now expect every item in the bar and More only on the row.

Closes #912

Notes for review

One string changed: the Appearance help text, which said the phone bar holds "the first four", now says it holds every item and scrolls. It needs re-translating in Weblate.
The edge cue uses sticky pseudo-elements, not mask-image, which would also make the bar's background see-through.
With scripts off, the bar still holds every item and scrolls, without the fade or scrolling the current item into view.
Not run locally: the full reflow walk in Greek and German. CI runs it.

🤖 Generated with Claude Code

Below `md` the main navigation bar held the first four items and *More*, which cost a tap in front of every other item and, where the labels did not fit side by side (Estonian at 320), put *More* on a second row. Now the bar holds every item, in the person's order, on one row: the slots share the width equally where they fit, each held at its longest word and never under 44 pixels, and the bar scrolls sideways in its own box where they do not. That reverses #299's "never scrolled" rule for the bar; the comments in `app.css`, `nav_links.html` and `core/navigation.py` now say so. The page itself still never scrolls sideways (SC 1.4.10). From `md` up *More* is unchanged. An end with more past it fades the items out under a sticky pseudo-element, so the last item in view is cut part way through: a shape as well as a shade. `app.js` marks those ends (`data-overflow-start` / `data-overflow-end`) as the bar scrolls and resizes, scrolls the current page's item into view as the page opens, and scrolls a link reached by Tab clear of the fades (`scroll-padding-inline`, SC 2.4.11) by moving the bar, never the page. `--bottom-bar-height` is still measured. The help text on Settings -> Appearance said the bar held "the first four"; it now says the bar holds them all and scrolls. Tests: the markup (every item a link of the nav, in order, More kept for the row), the built stylesheet below `md` (one row, overflow-x auto, More hidden, no counts, the fades) and the script's hooks; in the browser, at 320 in English and Estonian, one row that scrolls with the fade at the right end, the current item in view on load, each link reached by Tab in view, and More absent below `md` and present from it. The reflow walk's bar test and the existing bar tests now expect every item in the bar and More only on the row. Closes #912 ## Notes for review - **One string changed:** the Appearance help text, which said the phone bar holds "the first four", now says it holds every item and scrolls. It needs re-translating in Weblate. - **The edge cue** uses sticky pseudo-elements, not `mask-image`, which would also make the bar's background see-through. - **With scripts off,** the bar still holds every item and scrolls, without the fade or scrolling the current item into view. - **Not run locally:** the full reflow walk in Greek and German. CI runs it. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tiagoagueda added 1 commit

2026-10-27 15:42:44 +00:00

Put every item in the phone's navigation bar and let it scroll (#912 )

CI / Unit tests and coverage (Python 3.14) (push) Successful in 12m39s

Details

CI / Checks: lint, migrations, catalogues, settings, built files (push) Successful in 2m44s

Details

CI / Database tests on PostgreSQL (push) Successful in 3m43s

Details

CI / Security audit (push) Successful in 45s

Details

CI / Browser tests (Chromium) (push) Successful in 30m55s

Details

Every Python / Unit tests (Python 3.12) (push) Successful in 12m26s

Details

Every Python / Unit tests (Python 3.13) (push) Has been cancelled

Details

CI / Browser tests (Chromium) (pull_request) Has been cancelled

Details

CI / Unit tests and coverage (Python 3.14) (pull_request) Has been cancelled

Details

CI / Checks: lint, migrations, catalogues, settings, built files (pull_request) Has been cancelled

Details

CI / Database tests on PostgreSQL (pull_request) Has been cancelled

Details

CI / Security audit (pull_request) Has been cancelled

Details

d68e923902

Below `md` the main navigation bar held the first four items and *More*, which
cost a tap in front of every other item and, where the labels did not fit side
by side (Estonian at 320), put *More* on a second row. Now the bar holds every
item, in the person's order, on one row: the slots share the width equally
where they fit, each held at its longest word and never under 44 pixels, and
the bar scrolls sideways in its own box where they do not. That reverses
#299's "never scrolled" rule for the bar; the comments in `app.css`,
`nav_links.html` and `core/navigation.py` now say so. The page itself still
never scrolls sideways (SC 1.4.10). From `md` up *More* is unchanged.

An end with more past it fades the items out under a sticky pseudo-element,
so the last item in view is cut part way through: a shape as well as a shade.
`app.js` marks those ends (`data-overflow-start` / `data-overflow-end`) as the
bar scrolls and resizes, scrolls the current page's item into view as the page
opens, and scrolls a link reached by Tab clear of the fades
(`scroll-padding-inline`, SC 2.4.11) by moving the bar, never the page.
`--bottom-bar-height` is still measured.

The help text on Settings -> Appearance said the bar held "the first four";
it now says the bar holds them all and scrolls.

Tests: the markup (every item a link of the nav, in order, More kept for the
row), the built stylesheet below `md` (one row, overflow-x auto, More hidden,
no counts, the fades) and the script's hooks; in the browser, at 320 in
English and Estonian, one row that scrolls with the fade at the right end, the
current item in view on load, each link reached by Tab in view, and More
absent below `md` and present from it. The reflow walk's bar test and the
existing bar tests now expect every item in the bar and More only on the row.

Closes #912

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>