History

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
  1. .changeset/main-titlebar-overlay-align.md +5 −0
  2. packages/app/src/web/shell.tsx +4 −2
  3. packages/plugins/toolkits/src/page.tsx +1 −1
  4. 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
@@ -546,10 +546,12 @@ export function Shell() { · 545 unmodified lines
546546 )}
547547
548548 {/* Main content */}
549− <main className="flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
549+ <main className="relative flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
550550 {/* Desktop (macOS frameless) draggable title-bar strip. Gives the main
551551 area the same native window drag + double-click-to-zoom as the
552− sidebar header; hidden everywhere else via CSS. */}
552+ sidebar header; hidden everywhere else via CSS. Overlays the top of
553+ the main area (behind page content) so page headers stay flush with
554+ the top and their borders line up with the sidebar header. */}
553555 <div className="desktop-macos-main-titlebar" />
554556
555557 {/* Mobile top bar */}
packages/plugins/toolkits/src/page.tsx+1−1
@@ -1422,7 +1422,7 @@ export function ToolkitsPage(props: PluginPageProps) { · 1421 unmodified lines
14221422 return (
14231423 <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
14241424 {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">
14261426 <div className="flex min-w-0 items-center gap-3">
14271427 <h1 className="truncate text-sm font-semibold text-foreground">Toolkits</h1>
14281428 {AsyncResult.isSuccess(toolkits) && (
packages/react/src/styles/globals.css+30−7
@@ -180,23 +180,46 @@ · 179 unmodified lines
180180 desktop window it renders page content straight to the top edge with nothing
181181 marked as a drag region, so the window could not be moved or
182182 double-clicked-to-zoom from there (only the sidebar header worked, see
183− .desktop-macos-titlebar above). Reserve a title-bar-height strip along the
184− top of the main area and make it draggable so the whole top row behaves like
185− the native title bar. Hidden off-desktop. It reserves space rather than
186− overlaying, so no page content sits under the drag region (a drag region
187− would otherwise swallow clicks on anything beneath it). The traffic lights
188− sit over the sidebar, never the main area, so no left offset is needed here. */
183+ .desktop-macos-titlebar above). Lay a title-bar-height drag strip along the
184+ top of the main area so the whole top row behaves like the native title bar.
185+ Hidden off-desktop. It OVERLAYS the top of the main area (absolute, behind
186+ page content via z-index) rather than reserving its own row: reserving space
187+ pushed every page header down a full title-bar height, so its bottom border
188+ no longer lined up with the sidebar header's. Sitting behind, it keeps page
189+ headers flush with the top (borders aligned again) while the empty/text parts
190+ of the header stay draggable. Interactive controls carve themselves out of
191+ the drag region via the global no-drag rule below, so the strip never
192+ swallows their clicks. The traffic lights sit over the sidebar, never the
193+ main area, so no left offset is needed here. */
189194 .desktop-macos-main-titlebar {
190195 display: none;
191196 }
192197
193198 .executor-desktop-macos .desktop-macos-main-titlebar {
194199 display: block;
200+ position: absolute;
201+ top: 0;
202+ left: 0;
203+ right: 0;
195204 height: 3rem; /* matches the sidebar header (h-12) */
196− flex-shrink: 0;
205+ z-index: -1; /* behind page content so header controls stay clickable */
197206 -webkit-app-region: drag;
198207 }
199208
209+/* Safety net for the overlaid main drag strip: any interactive control that
210+ ends up within the top title-bar strip must carve itself out of the drag
211+ region, or the native window-drag would steal its clicks. Mirrors the
212+ explicit .desktop-macos-no-drag the sidebar header uses on its controls. */
213+.executor-desktop-macos button,
214+.executor-desktop-macos a,
215+.executor-desktop-macos input,
216+.executor-desktop-macos select,
217+.executor-desktop-macos textarea,
218+.executor-desktop-macos [role="button"],
219+.executor-desktop-macos [role="tab"] {
220+ -webkit-app-region: no-drag;
221+}
222+
200223 /* The 88px title-bar offset eats into the sidebar's width; without extra room
201224 the brand wordmark and the server-connection menu collide. Widen the macOS
202225 sidebar so both clear the traffic lights with comfortable spacing. */