fix(web): reserve macOS titlebar controls

apps/web/src/app.css

@@ -96,16 +96,22 @@
       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 {
+  .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;
   }
 }

apps/web/src/components/Titlebar.tsx

@@ -91,7 +91,12 @@ export function Titlebar({
   railToggle: RailTogglePresentation;
 }) {
   return (
-    <header className="drag-region workspace-topbar titlebar-traffic-light-inset titlebar-window-controls-reserve shrink-0 gap-1 border-border border-b bg-background px-1 sm:gap-2 sm:px-3">
+    <header
+      className="drag-region workspace-topbar titlebar-traffic-light-inset titlebar-window-controls-reserve shrink-0 gap-1 border-border border-b bg-background px-1 sm:gap-2 sm:px-3"
+      data-window-chrome={
+        rendererPlatform.mode === "desktop" ? rendererPlatform.platform : undefined
+      }
+    >
       <Tooltip>
         <TooltipTrigger
           render={

e2e/pwa-install.spec.ts

@@ -130,6 +130,20 @@ test.afterAll(async () => {
   await web?.stop();
 });
 
+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();
+});
+
 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" });

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:f6e4c9902a5b0bbaf92867119a67102e6ed6ab257fdf60961101cf0705febe0e"
     },
     {
       "sourcePath": "apps/web/src/hooks/useResizableWidth.ts",