From 67a21b4a102c39df62d1eddf65b9d74142f58a03 Mon Sep 17 00:00:00 2001 From: Senrokai Date: Wed, 30 Sep 2026 17:42:29 +0200 Subject: [PATCH] Keep the date on screen on a phone after Go, and hand focus back to the tab that folded 09eaf95 folded the Display sheet away on a narrow viewport once a date was set, and said the strip then read the date. It did only in its text: the dock's tab list could not shrink, the system view's five tabs take 397 px, and at 360 by 640 and 390 by 844 they pushed the date strip to x 406-511, past the right edge of a page that does not scroll. With the sheet folded, the set date was nowhere on screen; before the fold, the open field had at least shown it. And the fold removed the form that held focus, so focus fell to the page and the next Tab started again at Search, with nothing announcing the date. The tab list now gives way (min-w-0) and scrolls (overflow-x-auto), and the date and range strips keep their width (shrink-0). After a date is set on a phone, focus goes to the tab whose panel folded, so Enter opens it again. Live on :4301 in the Sun's system, Display, 2020-12-21T18:00, Enter: at 360x640 the panel folds, the strip "Date 2020-12-21" sits at x 82-230 and the tabs scroll in 73 px (397 of content); at 390x844 the strip is at 112-260 and the tabs scroll in 103; page scrollWidth equals the viewport at both, and the tab row stays 36 px high. Focus is on #dock-tab-display at both, and Enter reopens the panel. At 1400x900 nothing changes: the panel stays open, focus stays in the field, the tabs take their 437 px. Screenshots dock-go-360x640.png and dock-go-390x844.png, in the review's scratchpad (wave1/solar/fixr2). Tests: the tab list carries min-w-0 and overflow-x-auto and the date strip shrink-0 (jsdom lays nothing out, so the classes are what can be checked there; the positions above are the app's), and after Go on a phone the focused element is #dock-tab-display. Guarded mutants (full suite), each failing only its named test: min-w-0 and overflow-x-auto removed, shrink-0 removed from the date strip ('keeps the date strip on screen on a phone'), and the focus call removed ('hands focus to the tab that folded'). Unit suite 864/864, tsc -p tsconfig.app.json and etl:typecheck clean. Co-Authored-By: Claude Opus 5.5 (1M context) --- .../features/hud/hud-dock.component.spec.ts | 24 +++++++++++++++++++ src/app/features/hud/hud-dock.component.ts | 11 ++++++--- 2 files changed, 32 insertions(+), 3 deletions(-) diff --git a/src/app/features/hud/hud-dock.component.spec.ts b/src/app/features/hud/hud-dock.component.spec.ts index e8673b6..4598890 100644 --- a/src/app/features/hud/hud-dock.component.spec.ts +++ b/src/app/features/hud/hud-dock.component.spec.ts @@ -467,6 +467,30 @@ describe('HudDockComponent', () => { } }); + it('hands focus to the tab that folded, not to the page, so Enter opens the panel again', () => { + viewport.wide = false; + try { + const field = host().querySelector('#clock-date')!; + field.focus(); + field.value = '2020-12-21T18:00'; + button('Go').click(); + fixture.detectChanges(); + expect(document.activeElement?.id).toBe('dock-tab-display'); + } finally { + viewport.wide = true; + } + }); + + it('keeps the date strip on screen on a phone: the tabs give way to it, and scroll', () => { + // At 360 px the system view's five tabs take 397 px, and pushed the strip past the right + // edge, where nothing scrolls: after Go on a phone the date was nowhere on screen. + fixture.componentRef.setInput('date', '2020-12-21'); + fixture.detectChanges(); + const tabs = host().querySelector('[role="tablist"]')!.classList; + expect(tabs.contains('min-w-0') && tabs.contains('overflow-x-auto')).toBe(true); + expect(host().querySelector('[data-testid="hud-date"]')!.classList.contains('shrink-0')).toBe(true); + }); + it('keeps the panel open on a wide screen, where it covers little of the scene', () => { host().querySelector('#clock-date')!.value = '2020-12-21T18:00'; button('Go').click(); diff --git a/src/app/features/hud/hud-dock.component.ts b/src/app/features/hud/hud-dock.component.ts index 6fa208a..c9b6759 100644 --- a/src/app/features/hud/hud-dock.component.ts +++ b/src/app/features/hud/hud-dock.component.ts @@ -415,7 +415,9 @@ function isWideViewport(): boolean { }
-
+ +
@for (tab of tabs(); track tab) {