From 3e598a113d5102a267b1af7e2bd9a4a4d73dd515 Mon Sep 17 00:00:00 2001 From: Wolfgang Schoenberger <221313372+wolfiesch@users.noreply.github.com> Date: Sat, 18 Jul 2026 04:41:06 -0700 Subject: [PATCH 1/3] fix(web): reserve macOS titlebar controls --- apps/web/src/app.css | 6 ++++++ e2e/pwa-install.spec.ts | 10 ++++++++++ 2 files changed, 16 insertions(+) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index 091dc217..ba727c22 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -96,7 +96,13 @@ min-height: 2.75rem; } } +} +/* These platform reserves must share Tailwind's utilities layer. The + titlebar also uses px-* utilities, and a later cascade layer wins before + selector specificity is considered. Keeping these rules here ensures the + native window controls always take precedence over the normal padding. */ +@layer utilities { /* macOS traffic lights live at the top-left of the frameless window. Reserve their inset; the desktop shell owns the real controls. */ [data-platform="darwin"] .titlebar-traffic-light-inset { diff --git a/e2e/pwa-install.spec.ts b/e2e/pwa-install.spec.ts index 98b4aa69..3a1e9875 100644 --- a/e2e/pwa-install.spec.ts +++ b/e2e/pwa-install.spec.ts @@ -130,6 +130,16 @@ test.afterAll(async () => { await web?.stop(); }); +test("reserves the native macOS traffic-light area in the titlebar", async ({ page }) => { + await page.goto(`${web.url}fixture?platform=darwin&reset=1`, { + waitUntil: "domcontentloaded", + }); + + const titlebar = page.locator("header"); + await expect(titlebar).toHaveCSS("padding-left", "76px"); + await expect(titlebar.getByRole("button", { name: /session list/u })).toBeVisible(); +}); + test("installs from the hosted-client titlebar without overflowing a phone", async ({ page }) => { await page.setViewportSize({ width: 320, height: 568 }); await page.goto(web.url, { waitUntil: "domcontentloaded" }); From 9cac60d9200071956555452f507783f5aae5a317 Mon Sep 17 00:00:00 2001 From: Wolfgang Schoenberger <221313372+wolfiesch@users.noreply.github.com> Date: Sat, 18 Jul 2026 04:44:24 -0700 Subject: [PATCH 2/3] chore: refresh shell provenance checksum --- provenance/t3code/imports/f1-shell-20260711.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/provenance/t3code/imports/f1-shell-20260711.json b/provenance/t3code/imports/f1-shell-20260711.json index 5c7d266a..4043e0a4 100644 --- a/provenance/t3code/imports/f1-shell-20260711.json +++ b/provenance/t3code/imports/f1-shell-20260711.json @@ -30,7 +30,7 @@ "sourceBlobSha": "3ae42a3e61cac54e9fe75cb58a67313241989ec9", "targetPath": "apps/web/src/app.css", "classification": "adapted", - "checksum": "sha256:bc4ddb0bbceeb26a1b8754d8d39728e3a61a85baf6ed71719374b396d4134e75" + "checksum": "sha256:aa8b4d0273bc524ab226aedeb603e92293ab46b3ee65a06aa048f3ecf5a9d9af" }, { "sourcePath": "apps/web/src/hooks/useResizableWidth.ts", From 1bc3d9024ca8a1d9f61acd157cbdf798a2c68ad4 Mon Sep 17 00:00:00 2001 From: Wolfgang Schoenberger <221313372+wolfiesch@users.noreply.github.com> Date: Sat, 18 Jul 2026 04:46:03 -0700 Subject: [PATCH 3/3] fix(web): scope titlebar inset to desktop --- apps/web/src/app.css | 4 ++-- apps/web/src/components/Titlebar.tsx | 7 ++++++- e2e/pwa-install.spec.ts | 6 +++++- provenance/t3code/imports/f1-shell-20260711.json | 2 +- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/apps/web/src/app.css b/apps/web/src/app.css index ba727c22..c87b2b34 100644 --- a/apps/web/src/app.css +++ b/apps/web/src/app.css @@ -105,13 +105,13 @@ @layer utilities { /* macOS traffic lights live at the top-left of the frameless window. Reserve their inset; the desktop shell owns the real controls. */ - [data-platform="darwin"] .titlebar-traffic-light-inset { + .titlebar-traffic-light-inset[data-window-chrome="darwin"] { padding-left: 76px; } /* Linux window controls are injected by the desktop shell at the top right later; keep a modest reserve so nothing crowds that corner. */ - [data-platform="linux"] .titlebar-window-controls-reserve { + .titlebar-window-controls-reserve[data-window-chrome="linux"] { padding-right: 8px; } } diff --git a/apps/web/src/components/Titlebar.tsx b/apps/web/src/components/Titlebar.tsx index ef4ba18c..f31fc972 100644 --- a/apps/web/src/components/Titlebar.tsx +++ b/apps/web/src/components/Titlebar.tsx @@ -91,7 +91,12 @@ export function Titlebar({ railToggle: RailTogglePresentation; }) { return ( -
+
{ await web?.stop(); }); -test("reserves the native macOS traffic-light area in the titlebar", async ({ page }) => { +test("reserves macOS traffic-light space only for native window chrome", async ({ page }) => { await page.goto(`${web.url}fixture?platform=darwin&reset=1`, { waitUntil: "domcontentloaded", }); const titlebar = page.locator("header"); + await expect(titlebar).not.toHaveAttribute("data-window-chrome"); + await expect(titlebar).toHaveCSS("padding-left", "12px"); + + await titlebar.evaluate((element) => element.setAttribute("data-window-chrome", "darwin")); await expect(titlebar).toHaveCSS("padding-left", "76px"); await expect(titlebar.getByRole("button", { name: /session list/u })).toBeVisible(); }); diff --git a/provenance/t3code/imports/f1-shell-20260711.json b/provenance/t3code/imports/f1-shell-20260711.json index 4043e0a4..e4c5e5b7 100644 --- a/provenance/t3code/imports/f1-shell-20260711.json +++ b/provenance/t3code/imports/f1-shell-20260711.json @@ -30,7 +30,7 @@ "sourceBlobSha": "3ae42a3e61cac54e9fe75cb58a67313241989ec9", "targetPath": "apps/web/src/app.css", "classification": "adapted", - "checksum": "sha256:aa8b4d0273bc524ab226aedeb603e92293ab46b3ee65a06aa048f3ecf5a9d9af" + "checksum": "sha256:f6e4c9902a5b0bbaf92867119a67102e6ed6ab257fdf60961101cf0705febe0e" }, { "sourcePath": "apps/web/src/hooks/useResizableWidth.ts",