From 954cdc7bc81fcb285d008c0ad08827ab13435cce Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Thu, 27 Aug 2026 08:18:05 +1000
Subject: [PATCH] fix(desktop): restore compact Windows titlebar spacing
 (#45397)

---
 packages/app/src/home/route.tsx                 | 2 +-
 packages/app/src/new-session/screen.tsx         | 2 +-
 packages/app/src/session/route.tsx              | 6 ++----
 packages/app/src/session/screen.tsx             | 2 +-
 packages/app/src/session/session-frame.tsx      | 5 ++++-
 packages/app/src/shell/routes/routes.tsx        | 2 +-
 packages/app/src/shell/shell.tsx                | 9 ++++++++-
 packages/app/src/shell/titlebar/titlebar.tsx    | 3 ++-
 packages/desktop/src/main/windows/appearance.ts | 3 ++-
 9 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/app/src/home/route.tsx b/packages/app/src/home/route.tsx
index a01764c4b1d..506078e59c5 100644
--- a/packages/app/src/home/route.tsx
+++ b/packages/app/src/home/route.tsx
@@ -17,7 +17,7 @@ export function Home() {
   return (
     <div
       class={`
-        m-2 min-h-0 flex-1 self-stretch overflow-hidden rounded-[10px]
+        mx-2 mb-2 mt-[var(--shell-top-inset,8px)] min-h-0 flex-1 self-stretch overflow-hidden rounded-[10px]
         bg-v2-background-bg-base shadow-[var(--v2-elevation-raised)]
       `}
     >
diff --git a/packages/app/src/new-session/screen.tsx b/packages/app/src/new-session/screen.tsx
index 29028cb791b..8ae3d30a754 100644
--- a/packages/app/src/new-session/screen.tsx
+++ b/packages/app/src/new-session/screen.tsx
@@ -73,7 +73,7 @@ export default function NewSessionPage(props: { draftId: string }) {
     <div class="relative size-full overflow-hidden flex flex-col">
       {suspendUntilPromptReady()}
       <NewSessionStatus visible={settings.visibility.status()} />
-      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
         <NewSessionView composer={model} project={project} workspace={workspace} />
       </div>
     </div>
diff --git a/packages/app/src/session/route.tsx b/packages/app/src/session/route.tsx
index e1618f4e1d2..73be45a31c8 100644
--- a/packages/app/src/session/route.tsx
+++ b/packages/app/src/session/route.tsx
@@ -44,9 +44,7 @@ function TargetSessionSettingsCommand() {
   return null
 }
 
-function SessionRouteErrorBoundary(
-  props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key }>,
-) {
+function SessionRouteErrorBoundary(props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key }>) {
   return (
     <ErrorBoundary
       fallback={(error) => (
@@ -106,7 +104,7 @@ function PendingSessionState(props: { sessionID: string }) {
 
 function SessionStatePanel(props: ParentProps) {
   return (
-    <div class="flex min-h-0 flex-1 p-2">
+    <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
       <SessionPanelFrame raised>{props.children}</SessionPanelFrame>
     </div>
   )
diff --git a/packages/app/src/session/screen.tsx b/packages/app/src/session/screen.tsx
index 3d640e76af1..ece28d4f32b 100644
--- a/packages/app/src/session/screen.tsx
+++ b/packages/app/src/session/screen.tsx
@@ -164,7 +164,7 @@ export function SessionScreen(props: { session: SessionModel }) {
   return (
     <>
       <SessionHeader />
-      <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
+      <div class="flex-1 min-h-0 flex flex-col gap-2 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
         <div ref={screen.panel.ref} class="relative flex-1 min-h-0 flex flex-col md:flex-row gap-2">
           <div
             classList={{
diff --git a/packages/app/src/session/session-frame.tsx b/packages/app/src/session/session-frame.tsx
index f40fa044ba9..8d81032f987 100644
--- a/packages/app/src/session/session-frame.tsx
+++ b/packages/app/src/session/session-frame.tsx
@@ -2,7 +2,10 @@ import type { ParentProps } from "solid-js"
 
 export function SessionRouteFrame(props: ParentProps<{ padded?: boolean }>) {
   return (
-    <div class="relative flex size-full flex-col overflow-hidden" classList={{ "p-2": props.padded }}>
+    <div
+      class="relative flex size-full flex-col overflow-hidden"
+      classList={{ "px-2 pb-2 pt-[var(--shell-top-inset,8px)]": props.padded }}
+    >
       {props.children}
     </div>
   )
diff --git a/packages/app/src/shell/routes/routes.tsx b/packages/app/src/shell/routes/routes.tsx
index 8edc1b9c7fc..0b91a40c9e8 100644
--- a/packages/app/src/shell/routes/routes.tsx
+++ b/packages/app/src/shell/routes/routes.tsx
@@ -36,7 +36,7 @@ export function AppRoutes() {
           <SessionRouteFrame>
             <Suspense
               fallback={
-                <div class="flex min-h-0 flex-1 p-2">
+                <div class="flex min-h-0 flex-1 px-2 pb-2 pt-[var(--shell-top-inset,8px)]">
                   <SessionPanelFrame raised />
                 </div>
               }
diff --git a/packages/app/src/shell/shell.tsx b/packages/app/src/shell/shell.tsx
index ea914843ce4..5e9f6b090ef 100644
--- a/packages/app/src/shell/shell.tsx
+++ b/packages/app/src/shell/shell.tsx
@@ -43,6 +43,13 @@ export default function Layout(props: ParentProps) {
         style={{
           "padding-top": "env(safe-area-inset-top, 0px)",
           "padding-bottom": "env(safe-area-inset-bottom, 0px)",
+          // The native Windows titlebar already includes the gap above the content panels.
+          "--shell-top-inset":
+            platform.platform === "desktop" &&
+            platform.os === "windows" &&
+            !(mobile() && preferences.general.mobileTitlebarPosition() === "bottom")
+              ? "0px"
+              : "8px",
         }}
       >
         <Titlebar
@@ -59,7 +66,7 @@ export default function Layout(props: ParentProps) {
             <aside
               ref={(element) => setState("tabsMount", element)}
               data-slot="vertical-tabs-sidebar"
-              class="relative flex min-h-0 shrink-0 flex-col bg-v2-background-bg-deep px-2.5 py-2"
+              class="relative flex min-h-0 shrink-0 flex-col bg-v2-background-bg-deep px-2.5 pb-2 pt-[var(--shell-top-inset,8px)]"
               style={{ width: `${state.tabsWidth}px` }}
             >
               <ResizeHandle
diff --git a/packages/app/src/shell/titlebar/titlebar.tsx b/packages/app/src/shell/titlebar/titlebar.tsx
index d54d417e75f..5c8254eee93 100644
--- a/packages/app/src/shell/titlebar/titlebar.tsx
+++ b/packages/app/src/shell/titlebar/titlebar.tsx
@@ -27,6 +27,7 @@ import { newTabTooltipKeybind } from "@/shell/commands/tooltip-keybind"
 import { TitlebarRightMount } from "@/shell/titlebar/right-slot"
 
 const titlebarHeight = 36
+const windowsTitlebarHeight = 44 // Includes the content inset; matches the native Windows overlay.
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
 const macTrafficLightsBaseWidth = 84
@@ -59,7 +60,7 @@ export function Titlebar(props: {
   const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
   const minHeight = () => {
     if (mac()) return `${titlebarHeight / zoom()}px`
-    if (windows()) return `env(titlebar-area-height, ${titlebarHeight / Math.min(titlebarZoom(), 1)}px)`
+    if (windows()) return `env(titlebar-area-height, ${windowsTitlebarHeight / Math.min(titlebarZoom(), 1)}px)`
     return undefined
   }
   const windowsControlsWidth = () => `${windowsControlsBaseWidth / Math.max(titlebarZoom(), 1)}px`
diff --git a/packages/desktop/src/main/windows/appearance.ts b/packages/desktop/src/main/windows/appearance.ts
index 8f60ced4435..0f6ed705867 100644
--- a/packages/desktop/src/main/windows/appearance.ts
+++ b/packages/desktop/src/main/windows/appearance.ts
@@ -17,7 +17,8 @@ const oc2Background = {
 }
 const titlebarThemes = new WeakMap<BrowserWindow, Partial<TitlebarTheme>>()
 const pinchZoomEnabled = new WeakMap<BrowserWindow, boolean>()
-const titlebarHeight = 40
+// Match the renderer's 36px titlebar plus its former 8px content inset.
+const titlebarHeight = 44
 const maxZoomLevel = 10
 const minZoomLevel = 0.2
 let backgroundColor: string | undefined