From 58f175af32a43ccb654c175896526482d6454780 Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Mon, 20 Jul 2026 02:11:35 +0200 Subject: [PATCH] settings-nav robust: Sofort-Sprung statt Smooth-Scroll, Spec wartet auf networkidle MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Der animierte scrollIntoView landete auf einer veralteten Zielposition, wenn Query-Sektionen (Sessions/Tokens) während der Animation noch wuchsen — auf dem CI-Runner deterministisch rot. Jetzt springt die Navigation sofort; der Spec lässt die asynchronen Inhalte vor dem Klick settlen (networkidle) und lief lokal 10× ohne Retry grün. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_0155v2aT8AG1kZDQEZiCLBWC --- apps/web/e2e/settings-nav.spec.ts | 4 ++++ apps/web/src/components/SettingsLayout.tsx | 4 +++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/web/e2e/settings-nav.spec.ts b/apps/web/e2e/settings-nav.spec.ts index bab26b2..87accf8 100644 --- a/apps/web/e2e/settings-nav.spec.ts +++ b/apps/web/e2e/settings-nav.spec.ts @@ -20,6 +20,9 @@ test('user settings show the jump nav and clicking scrolls + activates', async ( const context = await contextForUser(browser, BASE_URL, 'fixture-user'); const page = await context.newPage(); await page.goto('/settings'); + // Let the async section content (sessions, tokens, …) settle first — + // sections growing above the target would push it out of view again. + await page.waitForLoadState('networkidle'); const nav = page.locator('.settings-nav'); await expect(nav).toBeVisible(); @@ -46,6 +49,7 @@ test('pond settings derive the nav from their sections', async ({ browser }) => const page = await context.newPage(); await page.goto(`/p/${pond.slug}/settings`); + await page.waitForLoadState('networkidle'); const links = page.locator('.settings-nav .settings-nav__link'); // The pond owner sees the full section stack — at least members, labels, diff --git a/apps/web/src/components/SettingsLayout.tsx b/apps/web/src/components/SettingsLayout.tsx index 5c7e88e..4589ea3 100644 --- a/apps/web/src/components/SettingsLayout.tsx +++ b/apps/web/src/components/SettingsLayout.tsx @@ -102,7 +102,9 @@ export function SettingsLayout({ children }: { children: React.ReactNode }): Rea }, []); const jump = (id: string): void => { - document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' }); + // Instant, not smooth: async section content (queries) can still grow + // during an animation, leaving it at a stale target position. + document.getElementById(id)?.scrollIntoView({ block: 'start' }); setActive(id); };