Fix #274: repo tab bar scrolls on narrow #297

Merged

crueber merged 1 commit from fix/issue-274 into main

2026-09-10 17:43:47 +00:00

crueber commented

2026-09-10 17:30:03 +00:00

Owner

Same treatment as the #273 site-nav strip:

Repo.jsx: nav gains max-w-full overflow-x-auto whitespace-nowrap — scrolls internally, never widens the page; a createEffect keeps the [aria-current=page] tab scrolled into view on navigation ({block: 'nearest', inline: 'center'} — no vertical page jump, guarded for non-DOM); aria-label + tab list unchanged.
ui.css: .repo-tabs hides the strip scrollbar (both engines, stable row height) + links shrink-0; keyboard Tab still walks the strip (focus-follow), dark + light share it. Next-tab peek is the touch affordance.
Test: web/test/unit/repo-tabs-narrow.test.js (strip-scroll pins, landmark, scrollbar hiding, scrollIntoView shape incl. guard, tab-list invariance, 390px arithmetic).
Docs: decision appended to docs/go/12_web_ui.md.

Verification: node --test web/test/unit/*.test.js 570/570 green (with workspace node_modules; dep-free subset green without); vite build green, compiled CSS carries the three .repo-tabs rules, bundle contains the scrollIntoView wiring. Browser proof open (shared-daemon network guard blocks loopback — no private daemon per workspace rules). No new deps. Do NOT merge.

Fixes #274 — the repo tab bar (Code … Settings, measured scrollWidth 515 vs clientWidth 358 at 390px) cut trailing tabs mid-letter with no scroll affordance and leaked overflow to the page root (docW 531 vs 390). Same treatment as the #273 site-nav strip: - `Repo.jsx`: nav gains `max-w-full overflow-x-auto whitespace-nowrap` — scrolls internally, never widens the page; a `createEffect` keeps the `[aria-current=page]` tab scrolled into view on navigation (`{block: 'nearest', inline: 'center'}` — no vertical page jump, guarded for non-DOM); `aria-label` + tab list unchanged. - `ui.css`: `.repo-tabs` hides the strip scrollbar (both engines, stable row height) + links `shrink-0`; keyboard Tab still walks the strip (focus-follow), dark + light share it. Next-tab peek is the touch affordance. - Test: `web/test/unit/repo-tabs-narrow.test.js` (strip-scroll pins, landmark, scrollbar hiding, scrollIntoView shape incl. guard, tab-list invariance, 390px arithmetic). - Docs: decision appended to `docs/go/12_web_ui.md`. Verification: `node --test web/test/unit/*.test.js` 570/570 green (with workspace node_modules; dep-free subset green without); `vite build` green, compiled CSS carries the three `.repo-tabs` rules, bundle contains the scrollIntoView wiring. Browser proof open (shared-daemon network guard blocks loopback — no private daemon per workspace rules). No new deps. Do NOT merge.

crueber added 1 commit

2026-09-10 17:30:03 +00:00

Fix #274 : repo tab bar scrolls internally at narrow widths (12_web_ui) 98462d1689

The tab row (scrollWidth 515 vs clientWidth 358 at 390px) cut trailing
tabs mid-letter and leaked overflow to the page root (docW 531). Same
treatment as the #273 site-nav strip: nav gains max-w-full overflow-x-auto
whitespace-nowrap, links shrink-0 via .repo-tabs in ui.css (strip scrollbar
hidden both engines, keyboard focus still followed), and a createEffect
keeps the active tab scrolled into view (block nearest, inline center).
aria-label + aria-current active style unchanged; TABS model untouched.
No new deps.

crueber referenced this pull request

2026-09-10 17:30:06 +00:00

Mobile: repo tab bar truncates with no scroll affordance (Releases/Settings unreachable-looking) #274

crueber referenced this pull request

2026-09-10 17:42:28 +00:00

Mobile: repo tab bar truncates with no scroll affordance (Releases/Settings unreachable-looking) #274

crueber merged commit 4777e72fd7 into main

2026-09-10 17:43:47 +00:00

crueber referenced this pull request from a commit

2026-09-10 17:43:48 +00:00

Merge pull request 'Fix #274: repo tab bar scrolls on narrow' (#297) from fix/issue-274 into main

crueber referenced this pull request