diff --git a/packages/web/src/index.css b/packages/web/src/index.css index 405c5637..2d663785 100644 --- a/packages/web/src/index.css +++ b/packages/web/src/index.css @@ -1,8 +1,8 @@ @import '@proxy/ui/styles.css'; -/* The macOS desktop window uses a hidden native title bar. The transparent drag surface leaves the - traffic lights over each column's own background, with no separate bar; browsers keep the page's - normal edge-to-edge layout. */ +/* The macOS desktop window uses a hidden native title bar. Its drag surface covers the column seams + below it while the native traffic lights remain above; browsers keep the page's normal + edge-to-edge layout. */ .desktop-app { /* Keep in step with the fallback in preload.ts and desktop's splash.css. */ --desktop-title-bar-height: 2rem; @@ -16,6 +16,7 @@ left: 0; box-sizing: border-box; height: var(--desktop-title-bar-height); + background: var(--background); border-bottom: 1px solid var(--border); content: ''; -webkit-app-region: drag; @@ -33,7 +34,7 @@ } /* The columns themselves reach the window's top, so their backgrounds continue under the traffic - lights. Only their contents make room for the controls and transparent drag surface. */ + lights. Only their contents make room for the controls and drag surface. */ .desktop-app [data-slot='sidebar-inner'], .desktop-app [data-desktop-panel], .desktop-app [data-desktop-page] { diff --git a/packages/web/src/lib/desktop.test.ts b/packages/web/src/lib/desktop.test.ts index 1e3a63e2..a99f9a5d 100644 --- a/packages/web/src/lib/desktop.test.ts +++ b/packages/web/src/lib/desktop.test.ts @@ -30,3 +30,11 @@ describe('hasHiddenDesktopTitleBar', () => { expect(hasHiddenDesktopTitleBar()).toBe(true); }); }); + +describe('hidden desktop title bar layout', () => { + test('covers the column seams behind the title bar', async () => { + const css = await Bun.file(new URL('../index.css', import.meta.url)).text(); + + expect(css).toMatch(/body::before\s*{[^}]*background:\s*var\(--background\)/s); + }); +});