From 368848fc3fd7ae4aaa328de8187cad54e071aabb Mon Sep 17 00:00:00 2001
From: arnestrickmann <115920878+arnestrickmann@users.noreply.github.com>
Date: Thu, 5 Nov 2026 15:26:58 -0800
Subject: [PATCH 1/2] fix: align desktop chat title bar

---
 packages/web/src/index.css           | 11 ++++++-----
 packages/web/src/lib/desktop.test.ts | 16 ++++++++++++++++
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 28149901..9fd52564 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,20 +16,21 @@
 	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;
 }
 
 /* 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] {
 	padding-top: var(--desktop-title-bar-height);
 }
 
-.desktop-app [data-desktop-page] > header {
+.desktop-app [data-desktop-page] > header.sticky {
 	top: var(--desktop-title-bar-height);
 }
 
diff --git a/packages/web/src/lib/desktop.test.ts b/packages/web/src/lib/desktop.test.ts
index 1e3a63e2..3b930784 100644
--- a/packages/web/src/lib/desktop.test.ts
+++ b/packages/web/src/lib/desktop.test.ts
@@ -30,3 +30,19 @@ describe('hasHiddenDesktopTitleBar', () => {
 		expect(hasHiddenDesktopTitleBar()).toBe(true);
 	});
 });
+
+describe('hidden desktop title bar layout', () => {
+	test('offsets only page-scrolling headers below the title bar', async () => {
+		const css = await Bun.file(new URL('../index.css', import.meta.url)).text();
+
+		expect(css).toMatch(
+			/\[data-desktop-page\]\s*>\s*header\.sticky\s*{[^}]*top:\s*var\(--desktop-title-bar-height\)/s,
+		);
+	});
+
+	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);
+	});
+});

From 991fbaf9e2f7b9611efc12cfd7ce9e0003134669 Mon Sep 17 00:00:00 2001
From: arnestrickmann <115920878+arnestrickmann@users.noreply.github.com>
Date: Thu, 5 Nov 2026 15:53:26 -0800
Subject: [PATCH 2/2] fix: isolate the desktop title bar seam

---
 packages/web/src/index.css           | 2 +-
 packages/web/src/lib/desktop.test.ts | 8 --------
 2 files changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 92264919..2d663785 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -41,7 +41,7 @@
 	padding-top: var(--desktop-title-bar-height);
 }
 
-.desktop-app [data-desktop-page] > header.sticky {
+.desktop-app [data-desktop-page] > header {
 	top: var(--desktop-title-bar-height);
 }
 
diff --git a/packages/web/src/lib/desktop.test.ts b/packages/web/src/lib/desktop.test.ts
index 3b930784..a99f9a5d 100644
--- a/packages/web/src/lib/desktop.test.ts
+++ b/packages/web/src/lib/desktop.test.ts
@@ -32,14 +32,6 @@ describe('hasHiddenDesktopTitleBar', () => {
 });
 
 describe('hidden desktop title bar layout', () => {
-	test('offsets only page-scrolling headers below the title bar', async () => {
-		const css = await Bun.file(new URL('../index.css', import.meta.url)).text();
-
-		expect(css).toMatch(
-			/\[data-desktop-page\]\s*>\s*header\.sticky\s*{[^}]*top:\s*var\(--desktop-title-bar-height\)/s,
-		);
-	});
-
 	test('covers the column seams behind the title bar', async () => {
 		const css = await Bun.file(new URL('../index.css', import.meta.url)).text();