diff --git a/electron/main.cjs b/electron/main.cjs index def71c5..c92671b 100644 --- a/electron/main.cjs +++ b/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, }), diff --git a/tests/desktop-platform.test.ts b/tests/desktop-platform.test.ts index dec4e0b..3b0268f 100644 --- a/tests/desktop-platform.test.ts +++ b/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);