desktop: use native-height Windows and Linux controls

electron/main.cjs

@@ -262,9 +262,11 @@ function createWindow(url) {
 			? { titleBarStyle: "hiddenInset", trafficLightPosition: { x: 16, y: 22.5 } }
 			: {
 				titleBarStyle: "hidden",
-				// Native min/max/close on the right; the renderer reserves their
-				// actual width via env(titlebar-area-*), not a guessed gutter.
-				titleBarOverlay: { color: "#141414", symbolColor: "#e5e5e5", height: 60 },
+				// Native min/max/close on the right, at the OS's compact default
+				// height. Do not force the zoom-invariant native overlay to match
+				// the renderer's 60 CSS px bar: zooming out would cover its border.
+				// The renderer reserves the actual width via env(titlebar-area-*).
+				titleBarOverlay: { color: "#141414", symbolColor: "#e5e5e5" },
 				// Keep the custom bar alone; Alt reveals the native menu.
 				autoHideMenuBar: true,
 			}),

tests/desktop-platform.test.ts

@@ -47,10 +47,11 @@ describe("desktop window chrome", () => {
 	});
 
 	for (const platform of ["win32", "linux"]) {
-		it(`${platform} uses native right-side controls with an Alt-accessible menu`, () => {
+		it(`${platform} uses native-height right-side controls with an Alt-accessible menu`, () => {
 			const options = windowOptions(platform);
 			assert.equal(options.titleBarStyle, "hidden");
-			assert.deepEqual(options.titleBarOverlay, { color: "#141414", symbolColor: "#e5e5e5", height: 60 });
+			assert.deepEqual(options.titleBarOverlay, { color: "#141414", symbolColor: "#e5e5e5" });
+			assert.equal(Object.hasOwn(options.titleBarOverlay, "height"), false, "omit height so the OS selects its native default");
 			assert.equal(options.trafficLightPosition, undefined);
 			assert.equal(options.autoHideMenuBar, true);
 			assert.equal(options.webPreferences.contextIsolation, true);