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); };