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.

Rhys Sullivan committed 4 months ago

Commit add2e401 parent 1a1f9aa4 files · +40 −10Browse files

Unified · Split

4 files

.changeset/main-titlebar-overlay-align.md +5 −0
packages/app/src/web/shell.tsx +4 −2
packages/plugins/toolkits/src/page.tsx +1 −1
packages/react/src/styles/globals.css +30 −7

.changeset/main-titlebar-overlay-align.md+5−0

@@ -0,0 +1,5 @@
	1	---
	2	"executor": patch
	3	---
	4
	5	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+4−2

       )}
       {/* 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+1−1

@@ -1422,7 +1422,7 @@ export function ToolkitsPage(props: PluginPageProps) { · 1421 unmodified lines
1422	return (	1422	return (
1423	<div className="flex min-h-0 flex-1 flex-col overflow-hidden">	1423	<div className="flex min-h-0 flex-1 flex-col overflow-hidden">
1424	{selectedToolkitSlug === null ? (	1424	{selectedToolkitSlug === null ? (
1425	<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">	1425	<div className="flex h-12 shrink-0 items-center gap-3 border-b border-border bg-background/95 px-4 backdrop-blur-sm">
1426	<div className="flex min-w-0 items-center gap-3">	1426	<div className="flex min-w-0 items-center gap-3">
1427	<h1 className="truncate text-sm font-semibold text-foreground">Toolkits</h1>	1427	<h1 className="truncate text-sm font-semibold text-foreground">Toolkits</h1>
1428	{AsyncResult.isSuccess(toolkits) && (	1428	{AsyncResult.isSuccess(toolkits) && (

packages/react/src/styles/globals.css+30−7

    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
+   .desktop-macos-titlebar above). Lay a title-bar-height drag strip along the
-   top of the main area and make it draggable so the whole top row behaves like
+   top of the main area so the whole top row behaves like the native title bar.
-   the native title bar. Hidden off-desktop. It reserves space rather than
+   Hidden off-desktop. It OVERLAYS the top of the main area (absolute, behind
-   overlaying, so no page content sits under the drag region (a drag region
+   page content via z-index) rather than reserving its own row: reserving space
-   would otherwise swallow clicks on anything beneath it). The traffic lights
+   pushed every page header down a full title-bar height, so its bottom border
-   sit over the sidebar, never the main area, so no left offset is needed here. */
+   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. */