fix(desktop): restore macOS navigation chrome alignment (#1797)

Signed-off-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>
Co-authored-by: npub13fn4ahfnvaa2qwylvegdgeajqs0mph6v4qsw4jcqnw4mjh3hzh2quuucm5 <8a675edd33677aa0389f6650d467b2041fb0df4ca820eacb009babb95e3715d4@sprout-oss.stage.blox.sqprod.co>

desktop/src-tauri/tauri.conf.json

@@ -25,6 +25,10 @@
         "titleBarStyle": "Overlay",
         "hiddenTitle": true,
         "dragDropEnabled": false,
+        "trafficLightPosition": {
+          "x": 16,
+          "y": 24
+        },
         "backgroundThrottling": "disabled",
         "minWidth": 800,
         "minHeight": 500

desktop/src/app/AppTopChrome.tsx

@@ -65,11 +65,11 @@ export function AppTopChrome({
 }: AppTopChromeProps) {
   const topChromeRef = React.useRef<HTMLDivElement>(null);
   const isFullscreen = useIsFullscreen();
-  // On macOS the native traffic-light buttons overlay the chrome, so the nav
-  // row clears their x-position. When the workspace rail is present it already
-  // occupies the far left, so the nav row only needs to clear the lights past
-  // the rail edge rather than the full offset. In fullscreen those buttons
-  // hide.
+  // On macOS the traffic-light buttons overlay the chrome (see
+  // `trafficLightPosition` in `tauri.conf.json`), so the nav row clears their
+  // x-position. When the workspace rail is present it already occupies the far
+  // left, so the nav row only needs to clear the lights past the rail edge
+  // rather than the full offset. In fullscreen those buttons hide.
   //
   // Fixed px on purpose: the native traffic lights do not scale with the app's
   // Cmd +/- text zoom (rem), so rem-based clearance shrinks under them when
@@ -80,7 +80,7 @@ export function AppTopChrome({
       ? "pl-[32px]"
       : "pl-[80px]"
     : "pl-3";
-  const navRowAlignmentClass = macChrome ? "-translate-y-[4px]" : null;
+  const navRowAlignmentClass = macChrome ? "translate-y-[3px]" : null;
 
   React.useEffect(() => {
     const topChrome = topChromeRef.current;

desktop/tests/e2e/top-chrome-zoom-clearance.spec.ts

@@ -1,7 +1,25 @@
 import { expect, test } from "@playwright/test";
+import { readFileSync } from "node:fs";
 
 import { installMockBridge } from "../helpers/bridge";
 
+type TauriConfig = {
+  app: {
+    windows: Array<{
+      trafficLightPosition?: { x: number; y: number };
+    }>;
+  };
+};
+
+const tauriConfig = JSON.parse(
+  readFileSync(
+    new URL("../../src-tauri/tauri.conf.json", import.meta.url),
+    "utf8",
+  ),
+) as TauriConfig;
+const EXPECTED_TRAFFIC_LIGHT_POSITION = { x: 16, y: 24 };
+const EXPECTED_NAV_CENTER_Y = 23;
+
 // The macOS traffic lights are native chrome: with `trafficLightPosition`
 // x:16 they occupy roughly x 16–68 regardless of the app's Cmd +/- text
 // zoom. The top-chrome nav row must clear that band in fixed px, so the
@@ -91,6 +109,22 @@ test.describe("top chrome macOS traffic-light clearance under text zoom", () =>
     await installMockBridge(page);
     await page.goto("/");
 
+    // Lock the native and webview placements together: removing this explicit
+    // Tauri inset or shifting the nav row regresses the macOS chrome alignment.
+    expect(tauriConfig.app.windows[0]?.trafficLightPosition).toEqual(
+      EXPECTED_TRAFFIC_LIGHT_POSITION,
+    );
+    const toggleBox = await page
+      .getByRole("button", { name: "Toggle Sidebar", exact: true })
+      .boundingBox();
+    expect(toggleBox).not.toBeNull();
+    // Tauri interprets y:24 as a native titlebar inset, not the literal
+    // traffic-light center. The established 40px row + 3px webview offset
+    // centers the adjacent controls at y:23.
+    expect((toggleBox?.y ?? 0) + (toggleBox?.height ?? 0) / 2).toBe(
+      EXPECTED_NAV_CENTER_Y,
+    );
+
     expect(await firstNavButtonX(page)).toBeGreaterThanOrEqual(
       TRAFFIC_LIGHT_RIGHT_EDGE,
     );