diff --git a/src/app/globals.css b/src/app/globals.css index cd58fffb27..8f4e9fcb90 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -120,11 +120,27 @@ client host adopts them. Without this structural reserve, Therapy moved the entire action stack when hydration relocated the composer (CLS 0.248). These are layout tokens, not a second v2 colour/theme source. */ - /* Re-measured after the privacy notice stopped spending a full 48px tap box - on its own wrapped line: the settled phone composer block is 106px, so the - old 7.625rem (122px) left a 16px empty band under it. The wide value was - already exact (88px) and the notice is a single 16px line from sm up. */ - --spacing-mode-home-composer-phone: 6.625rem; + /* Re-measured 2026-08-19 at 390px across six mode homes (therapy-compass, + dsm, forms, factsheets, specifiers, and the shared `/` home): every one + settles at 162px, not the 106px this reserved. The 56px difference is the + smart-search hint, which `UniversalSearchCommandSurface` renders INSIDE + this slot above the composer: a 48px hint row plus the 8px flex gap that + separates it from the composer (`gap-2` on `.universal-command-surface` — + the `gap-1` in that same expression is the bottom-dock placement, not this + slot). The earlier measurement counted only the composer pill plus the + privacy notice, before that hint existed. Under-reserving it meant the slot + grew on portal adoption and pushed the action and pill stacks down on every + ticket-bearing mode home (measured CLS: specifiers 0.055, dsm 0.047, + therapy 0.042, `/` 0.020, forms 0.019, factsheets 0.017). Both the hint row + and its gap are fixed-height on phone, so 162px is exact: the settled + layout is unchanged and only the pre-adoption reserve grows. + + The wide value is knowingly still short (88px against a settled 160px at + 1280 and 199px at 800). It is NOT simply raised to match: the sm+ surface + swaps the phone ticket for a prompt-chip row that rewraps with viewport + width, so no single static value is correct at every width. That needs a + different mechanism and is tracked separately. */ + --spacing-mode-home-composer-phone: 10.125rem; --spacing-mode-home-composer-wide: 5.5rem; /* Hero medallion. Scales continuously with the viewport the way --text-hero diff --git a/tests/search-route-ownership.test.ts b/tests/search-route-ownership.test.ts index 062e62d8bb..fe526519e3 100644 --- a/tests/search-route-ownership.test.ts +++ b/tests/search-route-ownership.test.ts @@ -214,7 +214,11 @@ describe("shared-search route ownership", () => { expect(homeTemplateSource).not.toMatch( /mode-home-composer-slot block min-h-\[var\(--spacing-mode-home-composer-phone\)\]/, ); - expect(globalsSource).toContain("--spacing-mode-home-composer-phone: 6.625rem"); + // 162px: the settled phone composer block, measured across six mode homes. + // It must equal that height, not merely be non-zero — a reserve short of the + // settled height is what shifted the action/pill stacks on adoption, and a + // reserve above it would leave a permanent empty band. + expect(globalsSource).toContain("--spacing-mode-home-composer-phone: 10.125rem"); expect(globalsSource).toContain("--spacing-mode-home-composer-wide: 5.5rem"); });