diff --git a/frontend/editor/src/core/components/WindowTitleBar.tsx b/frontend/editor/src/core/components/WindowTitleBar.tsx
deleted file mode 100644
index bfedf785ea..0000000000
--- a/frontend/editor/src/core/components/WindowTitleBar.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Core stub: the browser build has no custom window chrome. The desktop layer
-// shadows this (desktop/components/WindowTitleBar.tsx) with a real title bar on
-// Windows. Rendered by AppFrame, so it must resolve in every build.
-export function WindowTitleBar() {
-  return null;
-}
diff --git a/frontend/editor/src/core/components/filesPage/FilesPage.css b/frontend/editor/src/core/components/filesPage/FilesPage.css
index c4ab11f6be..6d4070edb6 100644
--- a/frontend/editor/src/core/components/filesPage/FilesPage.css
+++ b/frontend/editor/src/core/components/filesPage/FilesPage.css
@@ -21,9 +21,7 @@
   align-items: center;
   gap: 1rem;
   min-height: 48px;
-  /* Right padding also clears the desktop window-controls overlay so the whole
-     grid (search + actions) reflows inside it (0 unless Windows custom chrome). */
-  padding: 0 calc(0.75rem + var(--wincontrols-w, 0px)) 0 0.75rem;
+  padding: 0 0.75rem;
   border-bottom: 1px solid var(--c-border-subtle);
   background: var(--c-bg-raised);
   flex-shrink: 0;
diff --git a/frontend/editor/src/core/components/layout/AppFrame.tsx b/frontend/editor/src/core/components/layout/AppFrame.tsx
index 8b79d181e9..38fa92ecba 100644
--- a/frontend/editor/src/core/components/layout/AppFrame.tsx
+++ b/frontend/editor/src/core/components/layout/AppFrame.tsx
@@ -3,7 +3,6 @@ import { Outlet } from "react-router-dom";
 import { LoadingFallback } from "@app/components/shared/LoadingFallback";
 import { QuickNavHostProvider } from "@app/contexts/QuickNavHostContext";
 import { QuickNavRailHost } from "@app/components/shared/quickNav/QuickNavRailHost";
-import { WindowTitleBar } from "@app/components/WindowTitleBar";
 import "@app/components/layout/AppFrame.css";
 
 /** The rail renders once outside both apps; Suspense sits inside it, not above. */
@@ -11,10 +10,6 @@ export function AppFrame() {
   return (
     <QuickNavHostProvider>
       <div className="app-frame">
-        {/* Desktop (Windows) window controls, drawn as a fixed overlay in the
-            top-right corner so the rail and panels run to the window edge; null
-            on web + macOS/Linux. */}
-        <WindowTitleBar />
         <QuickNavRailHost />
         <div className="app-frame__content">
           <Suspense fallback={<LoadingFallback />}>
diff --git a/frontend/editor/src/core/components/tools/ToolPanel.css b/frontend/editor/src/core/components/tools/ToolPanel.css
index 64624ef0cc..b27885ccf5 100644
--- a/frontend/editor/src/core/components/tools/ToolPanel.css
+++ b/frontend/editor/src/core/components/tools/ToolPanel.css
@@ -31,11 +31,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  /* Extra top space keeps the expand toggle clear of the desktop window
-     controls overlay. Derive the ~control-height from --wincontrols-w (which is
-     138px when the custom Windows chrome is active, 0 otherwise) via min(), so
-     it needs only that one variable. */
-  padding-top: calc(10px + min(var(--wincontrols-w, 0px), 2rem));
+  padding-top: 10px;
   height: 100%;
   width: 100%;
   min-height: 0;
@@ -161,19 +157,9 @@
   gap: 0.5rem;
   min-height: 52px;
   padding: 0.5rem 0.75rem;
-  /* Keep the collapse toggle clear of the desktop window-controls overlay
-     (--wincontrols-w is 0 unless the custom Windows title bar is active). */
-  padding-right: calc(0.75rem + var(--wincontrols-w, 0px));
   box-sizing: border-box;
 }
 
-/* Active-tool header (e.g. Automate) sits at the panel's top-right too; keep its
-   close button clear of the window-controls overlay. Scoped to the tool panel so
-   the shared header elsewhere (AI chat, etc.) is untouched. */
-.tool-panel .sui-panelhdr__close {
-  margin-right: var(--wincontrols-w, 0px);
-}
-
 .tool-panel__compact-title {
   flex: 1 1 auto;
   min-width: 0;
diff --git a/frontend/editor/src/desktop/components/AppProviders.tsx b/frontend/editor/src/desktop/components/AppProviders.tsx
index d7405ef83d..0285c107ae 100644
--- a/frontend/editor/src/desktop/components/AppProviders.tsx
+++ b/frontend/editor/src/desktop/components/AppProviders.tsx
@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { AppProviders as ProprietaryAppProviders } from "@proprietary/components/AppProviders";
 import { DesktopConfigSync } from "@app/components/DesktopConfigSync";
+import { WindowTitleBar } from "@app/components/WindowTitleBar";
 import { DesktopQueryCacheReset } from "@app/components/DesktopQueryCacheReset";
 import { DesktopBannerInitializer } from "@app/components/DesktopBannerInitializer";
 import { SaveShortcutListener } from "@app/components/SaveShortcutListener";
@@ -328,6 +329,7 @@ export function AppProviders({ children }: { children: ReactNode }) {
       >
         {/* Also here: the auth check below switches mode pre-authChecked. */}
         <DesktopQueryCacheReset />
+        <WindowTitleBar />
         <div style={{ minHeight: "100vh" }} />
         {updatePopupModal}
       </ProprietaryAppProviders>
@@ -354,6 +356,7 @@ export function AppProviders({ children }: { children: ReactNode }) {
         }}
       >
         <DesktopQueryCacheReset />
+        <WindowTitleBar />
         <SaaSTeamProvider key={appKey}>
           <DesktopConfigSync />
           <DesktopBannerInitializer />
diff --git a/frontend/editor/src/desktop/components/WindowTitleBar.tsx b/frontend/editor/src/desktop/components/WindowTitleBar.tsx
index 7a7d506e44..a11cd72875 100644
--- a/frontend/editor/src/desktop/components/WindowTitleBar.tsx
+++ b/frontend/editor/src/desktop/components/WindowTitleBar.tsx
@@ -8,6 +8,9 @@ import FilterNoneIcon from "@mui/icons-material/FilterNone";
 import CloseIcon from "@mui/icons-material/Close";
 import { getDesktopOs, DesktopOs } from "@app/services/platformService";
 import styles from "@app/components/WindowTitleBar.module.css";
+// Desktop-only skin that reserves the controls' corner across core layout
+// surfaces; every rule is gated by the data-window-controls flag set below.
+import "@app/components/windowChrome.css";
 
 // Seed from the UA so the bar (and its reserved height) is present on the first
 // frame on Windows, avoiding a layout shift. getDesktopOs() confirms it right
@@ -19,10 +22,11 @@ const seedIsWindows =
  * Custom window controls for the Windows desktop build. The native caption is
  * removed in Rust (decorations:false), so this draws minimize/maximize/close as
  * a fixed overlay pinned to the top-right corner — the rail and panels run all
- * the way to the window edge, and the app chrome reserves the corner via
- * --wincontrols-w. Renders nothing on macOS/Linux (native decorations kept) and
- * in the browser build (core stub). tao provides edge/corner resize for the
- * undecorated window, so no manual resize handles are needed here.
+ * the way to the window edge, and the app chrome reserves the corner via the
+ * data-window-controls flag this sets on <html> (consumed by windowChrome.css).
+ * Renders nothing on macOS/Linux (native decorations kept); not bundled in the
+ * browser build. tao provides edge/corner resize for the undecorated window, so
+ * no manual resize handles are needed here.
  */
 export function WindowTitleBar() {
   const [isWindows, setIsWindows] = useState(seedIsWindows);
@@ -44,21 +48,19 @@ export function WindowTitleBar() {
     };
   }, []);
 
-  // The controls are a fixed overlay in the top-right corner. Publish their
-  // width so app chrome at the top-right (the tool panel header) can pad clear
-  // of them; unset (0) everywhere else. Layout effect so it lands before paint.
+  // Flag the custom chrome on <html> so windowChrome.css can reserve the
+  // controls' corner across the app. Set only when active (Windows desktop);
+  // absent otherwise, so the skin is inert on macOS/Linux. Layout effect so it
+  // lands before paint.
   useIsomorphicEffect(() => {
     const root = document.documentElement;
     if (active) {
-      root.style.setProperty("--wincontrols-w", "8.625rem"); // 3 x 46px
-      root.style.setProperty("--wincontrols-h", "2rem");
+      root.setAttribute("data-window-controls", "custom");
     } else {
-      root.style.removeProperty("--wincontrols-w");
-      root.style.removeProperty("--wincontrols-h");
+      root.removeAttribute("data-window-controls");
     }
     return () => {
-      root.style.removeProperty("--wincontrols-w");
-      root.style.removeProperty("--wincontrols-h");
+      root.removeAttribute("data-window-controls");
     };
   }, [active]);
 
@@ -113,7 +115,7 @@ export function WindowTitleBar() {
 
   const appWindow = getCurrentWindow();
   return (
-    <div className={styles.titleBar} data-tauri-drag-region>
+    <div className={styles.titleBar}>
       <div className={styles.controls}>
         <button
           type="button"
diff --git a/frontend/editor/src/desktop/components/windowChrome.css b/frontend/editor/src/desktop/components/windowChrome.css
new file mode 100644
index 0000000000..f507a64b2d
--- /dev/null
+++ b/frontend/editor/src/desktop/components/windowChrome.css
@@ -0,0 +1,55 @@
+/* Desktop (Windows) custom window chrome.
+ *
+ * The window controls are a fixed overlay in the top-right corner (see
+ * WindowTitleBar). These rules keep the app's own chrome clear of that corner.
+ *
+ * Loaded only in the desktop build (imported by WindowTitleBar) and gated on the
+ * data-window-controls flag the overlay sets on <html> only when active, so it
+ * is inert on macOS/Linux (flag never set) and absent from web builds. It
+ * targets core layout class names on purpose: this is the single, contained
+ * coupling point between the desktop chrome and the core layout, kept here in
+ * the desktop layer so the core components stay unaware of window chrome. */
+
+html[data-window-controls="custom"] {
+  --wincontrols-w: 8.625rem; /* three 46px controls */
+  --wincontrols-h: 2rem; /* control height */
+}
+
+/* Files-page toolbar spans the width; reflow search + actions left of the
+   controls by shrinking the grid's right edge. */
+html[data-window-controls="custom"] .files-page-header {
+  padding-right: calc(0.75rem + var(--wincontrols-w));
+}
+
+/* Right panel, expanded: move the header (PDF Tools, or an active tool such as
+   Automate) below the controls instead of squashing its title. */
+html[data-window-controls="custom"] .tool-panel__compact-header,
+html[data-window-controls="custom"] .tool-panel .sui-panelhdr {
+  margin-top: var(--wincontrols-h);
+}
+
+/* Right panel, collapsed: the strip is narrower than the controls, so push its
+   expand toggle straight down. */
+html[data-window-controls="custom"] .tool-panel__collapsed-strip {
+  padding-top: calc(10px + var(--wincontrols-h));
+}
+
+/* Viewer top bar: when the right panel is collapsed the bar widens under the
+   controls. :has() detects the collapsed strip (no flag needed in core) and we
+   push the right cluster clear. --nav-rail-w is the collapsed strip's width, so
+   only the controls' overhang past it is reserved. */
+html[data-window-controls="custom"]
+  .app-frame__content:has(.tool-panel__collapsed-strip)
+  .workbench-bar-globals {
+  margin-right: calc(var(--wincontrols-w) - var(--nav-rail-w));
+}
+
+/* Mobile layout: the top bar spans the full width. Keep the brand top-left
+   (already clear of the top-right controls) and drop the view switcher below
+   them by top-aligning the row and nudging the switcher down. */
+html[data-window-controls="custom"] .mobile-toggle {
+  align-items: flex-start;
+}
+html[data-window-controls="custom"] .mobile-toggle-buttons {
+  margin-top: var(--wincontrols-h);
+}