Keep the System header in view when Getting started opens it

Open System scrolled the Default model section with scrollIntoView, which
also scrolled the page, whose overflow is hidden, and pushed its header
out of sight. It now uses revealInPageBody, which scrolls only the page
body and can focus another element than the one it reveals. The Getting
started acceptance test checks the header stays in view for steps 2 and 4.

Author: SaladDay

apps/web/DESIGN.md

@@ -678,9 +678,10 @@ do: Set up sandboxes, Add node, Open Nodes or Open sandbox backend; Open System;
 Create project (which continues to the new project's first key) or Issue key;
 See how to call (the newest active project, preferring one with an active key), or
 Projects and keys without an active project. Add node, Create project and Issue key
-open their page with the dialog already open; Open System focuses the default
-harness's Set or Replace; See how to call opens the project with its How to call
-heading at the top of the page body, focused. Every step done turns it into one line, "You're set", with Take the tour and
+open their page with the dialog already open; Open System brings the Default
+model section to the top of the page body and focuses the default harness's Set or
+Replace; See how to call opens the project with its How to call heading at the top
+of the page body, focused. Only the page body scrolls; the page header stays. Every step done turns it into one line, "You're set", with Take the tour and
 Dismiss; it stays, through the tour, until dismissed, and the checklist does not
 come back on its own. The choice is kept per installation in the browser, also
 while the deployment cannot be read; Show Getting started, a quiet row above the

apps/web/e2e/access.spec.ts

@@ -83,6 +83,7 @@ test("opens a fresh install on the Overview's Getting started: a project and its
   await expect(page.getByRole("heading", { name: "My app", level: 1 })).toBeVisible();
   const call = page.getByRole("region", { name: "How to call" });
   await expect(call.getByRole("heading", { name: "How to call" })).toBeFocused();
+  await expect(page.getByRole("heading", { name: "My app", level: 1 })).toBeInViewport();
   await expect(call.getByLabel("Shell", { exact: true })).toHaveText('export OPENAI_BASE_URL=https://core.example.com/v1\nexport OPENAI_API_KEY="<project API key>"');
   const stored = await browserStorage(page);
   expect(stored).not.toContain("fixture-secret");
@@ -98,6 +99,8 @@ test("leads from Getting started to the default model, and counts it done once t
   // It arrives on the default harness's action.
   const set = page.getByRole("button", { name: "Set the default model for Codex" });
   await expect(set).toBeFocused();
+  // Only the page body scrolls to it: the page header stays in view.
+  await expect(page.getByRole("heading", { name: "System", level: 1 })).toBeInViewport();
   await set.click();
   const form = page.getByRole("dialog", { name: "Set default model for Codex" });
   await form.getByLabel("Base URL").fill("https://model.example/v1");

apps/web/src/components/console-ui.tsx

@@ -142,15 +142,16 @@ export function PageBody({ children, className }: { children: ReactNode; classNa
 }
 
 /**
- * Scrolls the page body so `element` sits at its top, then focuses it. Only
- * the body scrolls: `scrollIntoView` would also shift the page, whose
- * overflow is hidden, and push the page header out of sight.
+ * Scrolls the page body so `element` sits at its top, then focuses `focus`
+ * (the element itself by default). Only the body scrolls: `scrollIntoView`
+ * would also shift the page, whose overflow is hidden, and push the page
+ * header out of sight.
  */
-export function revealInPageBody(element: HTMLElement | null): void {
+export function revealInPageBody(element: HTMLElement | null, focus: HTMLElement | null = element): void {
   if (!element) return;
   const body = element.closest<HTMLElement>(".console-page-body");
   if (body) body.scrollTop += element.getBoundingClientRect().top - body.getBoundingClientRect().top - 12;
-  element.focus({ preventScroll: true });
+  focus?.focus({ preventScroll: true });
 }
 
 export function Section({

apps/web/src/features/system/DefaultModelsSection.tsx

@@ -4,7 +4,7 @@ import { useCallback, useId, useRef, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 
 import { ConfirmDialog } from "../../components/ConfirmDialog";
-import { EmptyState, HelpTip, Section, StatusDot } from "../../components/console-ui";
+import { EmptyState, HelpTip, revealInPageBody, Section, StatusDot } from "../../components/console-ui";
 import { ErrorState } from "../../components/ErrorState";
 import { Modal } from "../../components/Modal";
 import { TableSkeleton } from "../../components/Skeleton";
@@ -72,8 +72,7 @@ export function DefaultModelsSection() {
     window.requestAnimationFrame(() => {
       const section = document.getElementById("system-models-heading")?.closest("section");
       const action = section?.querySelector<HTMLButtonElement>("article[data-default] .system-model-actions button") ?? section?.querySelector<HTMLButtonElement>(".system-model-actions button");
-      section?.scrollIntoView({ block: "start" });
-      action?.focus();
+      revealInPageBody(section ?? null, action ?? null);
     });
   });