Fix desktop main title-bar strip misaligning page headers (#1167)

The macOS desktop title-bar strip added to the main area reserved its own
title-bar-height row above page content, pushing every page header down so its
bottom border no longer lined up with the sidebar header. Overlay the strip on
top of the main area (absolute, behind page content via z-index) instead of
reserving a row, with a global no-drag rule so interactive controls keep their
clicks. Also give the Toolkits header a fixed h-12 (min-h-12 emitted no rule, so
it rendered short) so its border matches the sidebar header and sibling pages.

Author: RhysSullivan

.changeset/main-titlebar-overlay-align.md

@@ -0,0 +1,5 @@
+---
+"executor": patch
+---
+
+Fix the desktop app's main-area title-bar strip pushing page content down so page headers no longer lined up with the sidebar header. The drag strip now overlays the top of the main area (behind page content) instead of reserving its own row, and the Toolkits header uses a fixed title-bar height so its bottom border aligns with the sidebar header again.

packages/app/src/web/shell.tsx

@@ -546,10 +546,12 @@ export function Shell() {
       )}
 
       {/* Main content */}
-      <main className="flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
+      <main className="relative flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
         {/* Desktop (macOS frameless) draggable title-bar strip. Gives the main
             area the same native window drag + double-click-to-zoom as the
-            sidebar header; hidden everywhere else via CSS. */}
+            sidebar header; hidden everywhere else via CSS. Overlays the top of
+            the main area (behind page content) so page headers stay flush with
+            the top and their borders line up with the sidebar header. */}
         <div className="desktop-macos-main-titlebar" />
 
         {/* Mobile top bar */}

packages/plugins/toolkits/src/page.tsx

@@ -1422,7 +1422,7 @@ export function ToolkitsPage(props: PluginPageProps) {
   return (
     <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
       {selectedToolkitSlug === null ? (
-        <div className="flex min-h-12 shrink-0 items-center gap-3 border-b border-border bg-background/95 px-4 py-2 backdrop-blur-sm">
+        <div className="flex h-12 shrink-0 items-center gap-3 border-b border-border bg-background/95 px-4 backdrop-blur-sm">
           <div className="flex min-w-0 items-center gap-3">
             <h1 className="truncate text-sm font-semibold text-foreground">Toolkits</h1>
             {AsyncResult.isSuccess(toolkits) && (

packages/react/src/styles/globals.css

@@ -180,23 +180,46 @@
    desktop window it renders page content straight to the top edge with nothing
    marked as a drag region, so the window could not be moved or
    double-clicked-to-zoom from there (only the sidebar header worked, see
-   .desktop-macos-titlebar above). Reserve a title-bar-height strip along the
-   top of the main area and make it draggable so the whole top row behaves like
-   the native title bar. Hidden off-desktop. It reserves space rather than
-   overlaying, so no page content sits under the drag region (a drag region
-   would otherwise swallow clicks on anything beneath it). The traffic lights
-   sit over the sidebar, never the main area, so no left offset is needed here. */
+   .desktop-macos-titlebar above). Lay a title-bar-height drag strip along the
+   top of the main area so the whole top row behaves like the native title bar.
+   Hidden off-desktop. It OVERLAYS the top of the main area (absolute, behind
+   page content via z-index) rather than reserving its own row: reserving space
+   pushed every page header down a full title-bar height, so its bottom border
+   no longer lined up with the sidebar header's. Sitting behind, it keeps page
+   headers flush with the top (borders aligned again) while the empty/text parts
+   of the header stay draggable. Interactive controls carve themselves out of
+   the drag region via the global no-drag rule below, so the strip never
+   swallows their clicks. The traffic lights sit over the sidebar, never the
+   main area, so no left offset is needed here. */
 .desktop-macos-main-titlebar {
   display: none;
 }
 
 .executor-desktop-macos .desktop-macos-main-titlebar {
   display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
   height: 3rem; /* matches the sidebar header (h-12) */
-  flex-shrink: 0;
+  z-index: -1; /* behind page content so header controls stay clickable */
   -webkit-app-region: drag;
 }
 
+/* Safety net for the overlaid main drag strip: any interactive control that
+   ends up within the top title-bar strip must carve itself out of the drag
+   region, or the native window-drag would steal its clicks. Mirrors the
+   explicit .desktop-macos-no-drag the sidebar header uses on its controls. */
+.executor-desktop-macos button,
+.executor-desktop-macos a,
+.executor-desktop-macos input,
+.executor-desktop-macos select,
+.executor-desktop-macos textarea,
+.executor-desktop-macos [role="button"],
+.executor-desktop-macos [role="tab"] {
+  -webkit-app-region: no-drag;
+}
+
 /* The 88px title-bar offset eats into the sidebar's width; without extra room
    the brand wordmark and the server-connection menu collide. Widen the macOS
    sidebar so both clear the traffic lights with comfortable spacing. */