fix(ui): balance mobile header new-chat edge inset

docs/branch-review-ledger.md

@@ -636,3 +636,4 @@ Use this ledger to prevent repeated branch and PR reviews when the reviewed HEAD
 | 2026-07-19 | PR #938 / `cursor/fix-differentials-results-top-d760` | efe472fac3489473e2465da2d92980508c20fd81 | merge main (#934 favourites) + #941 sync | Merged favourites guest-gate (#934) then Specifiers results UI (#941). Product conflicts none: kept `contentAlign="startOnPhone"` on Specifiers home while taking #941 results chrome. `ui-overlap` gotoHome wait conflict resolved with settled single-header short-circuit. No new P0–P2. Residual: human approving review required for squash auto-merge. | Local: align Vitest; favourites+app-modes+tools 42 tests; Chromium ui-overlap+ui-tools 95/95; verify:cheap unit stage green. Hosted CI green on pre-#941 tip; re-running after this merge. |
 | 2026-07-20 | cursor/documents-search-header-3eab / PR #936 | bdc333a9fa7e420e2beb2f146c6f271196869cb5 (squash on main) | post-merge closeout + branch-cleanup | Squash-merged to main. Product proof on main: `DocumentResultsControls`, identity-first documents results chrome, governance notice under controls, Also-in-library strip removed from documents results path. Remote feature ref already deleted by protected-main workflow; local tip `fd559a07` retained only merge/review commits with no unique product patch vs main. | Hosted pre-merge and post-merge required checks green (Static/Unit/Build/Production UI/PR required). Squash content proof via main tree symbols; remote `ls-remote` empty after prune; local branch deleted after this ledger row. No OpenAI/Supabase provider calls. |
 | 2026-07-20 | cursor/fix-ui-overlap-duplicate-header-3eab / PR #944 | 08181b8b45cf23d53ff7fb8682fb5f83f4417fb0 (squash on main) | post-merge closeout + branch-cleanup | Squash-merged to main. Product proof: `gotoHome` pins `/?mode=answer` and waits for exactly one `header#search` before overlap measurement, closing the landing-preference dual-banner flake that failed Production UI then PR required on #936. Remote feature ref already deleted; local tip `418de1b9` is merge-only after squash. | Local before merge: verify:pr-local (2961 unit) + Chromium ui-overlap 12/12. Hosted exact-head and post-merge: Production UI, PR required, Static, Unit green (Build skipped for test-only). No OpenAI/Supabase provider calls. |
+| 2026-07-19 | cursor/mobile-header-new-chat-inset-66c0 (PR #940) | 84eb0b6c3782e27fbbd1ec79b87b10327802ec1e | final mobile header new-chat edge inset review + merge readiness | No high-confidence P0-P1. Root cause: unlayered `@media (max-width:639px)` zeroed `.edge-glass-header` padding and beat `@layer components`. Fixed with tokenized `--header-edge-pad: 1rem` shared by layered base + unlayered phone guard; Playwright symmetry checks at 360/390; source contract blocks a `max(0px, safe-area)` regression. Merged latest `origin/main` (including #933/#942/#943) while keeping the header-edge-pad token. Residual: headless Chromium cannot exercise asymmetric safe-area `max()`; DocumentViewer gains the same pad but is outside the symmetry test. | Local geometry probe 360/390/640 = 16px/16px symmetric; CSS contract Vitest 5/5; `ui-overlap` Chromium 14/14; prior `verify:ui` 242/242 on the functional head; `verify:cheap` unit suite hit only the known container-only `pdf-extraction-budget` python ENOENT artifact (also fails on clean main / hosted-CI-green elsewhere). PR marked ready; squash auto-merge enabled. No OpenAI/live Supabase/provider calls. |

src/app/globals.css

@@ -267,6 +267,10 @@
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
+ /* Phone/sm header chrome inset; matches mode-home px-4. Referenced by both
+ the layered .edge-glass-header base and the unlayered max-width:639px
+ guard so the values cannot drift apart. lg overrides to 1.5rem. */
+ --header-edge-pad: 1rem;
  /* Keep in sync with mobile-composer-reserve.ts (phone dock clearance). */
  --phone-dock-hidden-pad: 0.75rem;
  --phone-dock-differentials-compare-clearance: 12.5rem;
@@ -556,8 +560,12 @@ summary::-webkit-details-marker {
 @layer components {
  .edge-glass-header {
  isolation: isolate;
- padding-left: max(0.75rem, var(--safe-area-left));
- padding-right: max(0.75rem, var(--safe-area-right));
+ /* Uses --header-edge-pad (1rem) so phone icons align with mode-home px-4.
+ Keep safe-area max() so notched devices never under-inset. The unlayered
+ max-width:639px block below must also use this token — unlayered rules
+ beat @layer components, so a literal there would reintroduce drift. */
+ padding-left: max(var(--header-edge-pad), var(--safe-area-left));
+ padding-right: max(var(--header-edge-pad), var(--safe-area-right));
  /* Translucent glass bar: the header's backdrop-blur utilities frost the
  content scrolling beneath it (they were inert over the old opaque
  var(--surface)). The .edge-glass-header-backdrop scrim supersedes the
@@ -596,15 +604,9 @@ summary::-webkit-details-marker {
  box-shadow: none;
  }
 
- /* Responsive header padding (moved in from the shared @media blocks below so
- the whole .edge-glass-header class is layered together). */
- @media (min-width: 640px) {
- .edge-glass-header {
- padding-left: max(1rem, var(--safe-area-left));
- padding-right: max(1rem, var(--safe-area-right));
- }
- }
-
+ /* Desktop header padding (moved in from the shared @media blocks below so
+ the whole .edge-glass-header class is layered together). Base/sm share
+ --header-edge-pad. */
  @media (min-width: 1024px) {
  .edge-glass-header {
  padding-left: max(1.5rem, var(--safe-area-left));
@@ -1771,9 +1773,13 @@ summary::-webkit-details-marker {
 }
 
 @media (max-width: 639px) {
+ /* Unlayered on purpose: a prior max(0px, safe-area) here beat the layered
+ inset and pinned new-chat to the phone bezel. Keep the tokenized phone
+ value so unlayered media cannot reintroduce a 0px override or drift from
+ the @layer components base. */
  .edge-glass-header {
- padding-left: max(0px, var(--safe-area-left));
- padding-right: max(0px, var(--safe-area-right));
+ padding-left: max(var(--header-edge-pad), var(--safe-area-left));
+ padding-right: max(var(--header-edge-pad), var(--safe-area-right));
  }
 
  .dashboard-composer-edge.answer-footer-search-edge:not(.answer-footer-search-dock) {

tests/ui-overlap.spec.ts

@@ -128,6 +128,39 @@ test.describe("Header element overlap coverage", () => {
  });
  }
 
+ for (const viewport of [
+ { name: "narrow-phone", width: 360, height: 780 },
+ { name: "phone", width: 390, height: 820 },
+ ] as const) {
+ test(`header menu and new-chat insets stay symmetric on ${viewport.name}`, async ({ page }) => {
+ await page.setViewportSize({ width: viewport.width, height: viewport.height });
+ await mockDemoDashboard(page);
+ await gotoHome(page);
+
+ const menu = page.getByRole("button", { name: "Open Clinical Guide menu" });
+ const newChat = page.getByRole("button", { name: "Start a new chat" });
+ await expect(menu).toBeVisible();
+ await expect(newChat).toBeVisible();
+
+ // Headless Chromium reports env(safe-area-inset-*) as 0, so this asserts
+ // the --header-edge-pad (1rem) chrome inset — not notch asymmetry.
+ const menuBox = await menu.boundingBox();
+ const newChatBox = await newChat.boundingBox();
+ expect(menuBox, "menu control must have geometry").not.toBeNull();
+ expect(newChatBox, "new-chat control must have geometry").not.toBeNull();
+
+ const leftInset = menuBox!.x;
+ const rightInset = viewport.width - (newChatBox!.x + newChatBox!.width);
+ // 1rem header pad (~16px) with 2px subpixel tolerance.
+ expect(leftInset, "left menu inset should be at least ~1rem").toBeGreaterThanOrEqual(14);
+ expect(rightInset, "right new-chat inset should be at least ~1rem").toBeGreaterThanOrEqual(14);
+ expect(
+ Math.abs(leftInset - rightInset),
+ `left/right insets should match (left=${leftInset}, right=${rightInset})`,
+ ).toBeLessThanOrEqual(2);
+ });
+ }
+
  for (const viewport of [
  { name: "mobile", width: 390, height: 820 },
  { name: "desktop", width: 1280, height: 900 },

tests/ui-overlay-css-contract.test.ts

@@ -39,4 +39,17 @@ describe("overlay and global CSS contracts", () => {
  expect(baseBlock).not.toContain("border-color:");
  expect(globalStylesSource).toMatch(/\.answer-footer-search-pill:focus-within\s*\{[\s\S]*?border-color:/);
  });
+
+ it("keeps phone header edge padding tokenized and never zeroed by unlayered media", () => {
+ // --header-edge-pad is the single phone/sm inset shared by the layered
+ // .edge-glass-header base and the unlayered max-width:639px guard. A bare
+ // max(0px, safe-area) override previously pinned new-chat to the bezel.
+ expect(occurrenceCount(globalStylesSource, "--header-edge-pad:")).toBe(1);
+ expect(globalStylesSource).toMatch(/--header-edge-pad:\s*1rem;/);
+ expect(occurrenceCount(globalStylesSource, "max(var(--header-edge-pad), var(--safe-area-left))")).toBe(2);
+ expect(occurrenceCount(globalStylesSource, "max(var(--header-edge-pad), var(--safe-area-right))")).toBe(2);
+ expect(globalStylesSource).not.toMatch(
+ /\.edge-glass-header\s*\{[^}]*padding-left:\s*max\(0px,\s*var\(--safe-area-left\)\)/s,
+ );
+ });
 });