fix(desktop): cover the Resource header bar too

The first pass found its surfaces by grepping one exact class string, which
turned up the minority header. `ResourceHeader` is the same bar written as
`px-4 py-[8.5px]`, and it is the one logs, files, tables, knowledge and
scheduled tasks use — plus every loading fallback. Those all still drew
under the traffic lights, and on the breadcrumb surfaces the occluded
element is an interactive popover button, not just a title.

Share the lane math as TITLE_BAR_LANE_PT and compose it from both bar
geometries, which genuinely differ (the Resource bar is bordered and has a
min height). Nothing nests one bar inside the other, so no reset is needed:
the only out-of-pane render is the landing tables preview.

Move the variable's `0px` default to `:root` alongside the other
desktop-title-bar vars, so it is defined for bars outside
`.workspace-content-shell` — the standalone settings shell and that landing
preview — where an undefined var() inside calc() would be invalid at
computed-value time and drop padding-top entirely. That replaces the
per-call fallback, leaving one default instead of two that can drift.

Fold the assertions into the existing desktop title-bar surface audit
rather than a second audit file with its own conventions. The standalone
guard is gone: it keyed on one spelling of the geometry, so it was blind to
`px-4 py-[8.5px]` — the very re-derivation that made this pass necessary.

Author: Waleed Latif

apps/sim/app/_shell/desktop-title-bar-surfaces.test.ts

@@ -14,6 +14,10 @@ const workspaceChrome = read(
 )
 const sidebar = read('../workspace/[workspaceId]/w/components/sidebar/sidebar.tsx')
 const globalStyles = read('../_styles/globals.css')
+const pageHeaderBar = read('../../components/page-header-bar.ts')
+const resourceHeader = read(
+  '../workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx'
+)
 
 describe('desktop title-bar surface audit', () => {
   it('applies the safe-area shell only when the auth route is login', () => {
@@ -65,4 +69,26 @@ describe('desktop title-bar surface audit', () => {
     expect(sidebar).toContain('[[data-sim-desktop-title-bar=inset]_&]:pt-[var(')
     expect(sidebar).not.toMatch(/\[\[data-sim-desktop-title-bar=inset\]_&\]:pt-\d/)
   })
+
+  it('defines the content-pane lane once, defaulting to zero', () => {
+    // A `:root` default keeps the variable defined for bars that render outside
+    // `.workspace-content-shell` (the standalone settings shell at /account,
+    // /organization/[id], /selfhost; the landing tables preview). An undefined var()
+    // inside calc() is invalid at computed-value time and drops padding-top entirely.
+    expect(globalStyles).toMatch(/:root\s*\{[^}]*--workspace-content-title-bar-inset:\s*0px/s)
+    expect(globalStyles).toContain(
+      '.workspace-content-shell[data-sidebar-collapsed] {\n  --workspace-content-title-bar-inset: var(--desktop-title-bar-height);'
+    )
+  })
+
+  it('reserves that lane in every top-of-pane header bar', () => {
+    // Both top-bar geometries must compose the shared lane padding. A bare
+    // `pt-`/`py-[8.5px]` in either is the bug: the bar then draws under the traffic
+    // lights and the sidebar expander whenever the sidebar is collapsed on desktop.
+    expect(pageHeaderBar).toContain('pt-[calc(8.5px+var(--workspace-content-title-bar-inset))]')
+    expect(pageHeaderBar).toContain('TITLE_BAR_LANE_PT')
+
+    expect(resourceHeader).toContain('TITLE_BAR_LANE_PT')
+    expect(resourceHeader).not.toMatch(/py-\[8\.5px\]/)
+  })
 })

apps/sim/app/_styles/globals.css

@@ -14,6 +14,7 @@
   --sidebar-collapsed-width: 51px; /* icon rail on web; desktop overrides to 0 before first paint */
   --sidebar-expanded-width: 248px; /* SIDEBAR_WIDTH.DEFAULT; the width to restore to, held even while collapsed */
   --desktop-title-bar-height: 0px; /* macOS traffic-light lane; desktop overrides before first paint */
+  --workspace-content-title-bar-inset: 0px; /* lane the content pane must leave clear; only non-zero when the pane, not the sidebar, sits under it */
   --desktop-title-bar-inset-x: 0px; /* clearance past the traffic lights; desktop overrides */
   --desktop-title-bar-control-offset: 0px; /* centres a lane control; desktop overrides */
   --desktop-title-bar-control-size: 0px; /* control seated in the lane; desktop overrides */
@@ -122,10 +123,6 @@ html[data-sim-desktop-title-bar="inset"]
   letter-spacing: 0.02em;
 }
 
-.workspace-content-shell {
-  --workspace-content-title-bar-inset: 0px;
-}
-
 .workspace-content-shell[data-sidebar-collapsed] {
   --workspace-content-title-bar-inset: var(--desktop-title-bar-height);
 }

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx

@@ -31,6 +31,7 @@ import {
 } from '@sim/emcn'
 import { ArrowUpLeft } from 'lucide-react'
 import { createPortal } from 'react-dom'
+import { TITLE_BAR_LANE_PT } from '@/components/page-header-bar'
 import { InlineRenameInput } from '@/app/workspace/[workspaceId]/components/inline-rename-input'
 import { FloatingOverflowText } from '@/app/workspace/[workspaceId]/components/resource/components/floating-overflow-text'
 
@@ -131,7 +132,10 @@ export const ResourceHeader = memo(function ResourceHeader({
   return (
     <div
       ref={headerRef}
-      className='flex min-h-[48px] items-center border-[var(--border)] border-b px-4 py-[8.5px]'
+      className={cn(
+        'flex min-h-[48px] items-center border-[var(--border)] border-b px-4 pb-[8.5px]',
+        TITLE_BAR_LANE_PT
+      )}
     >
       <div className='flex min-w-0 flex-1 items-center justify-between gap-3'>
         <div className='flex min-w-0 flex-1 items-center gap-2 overflow-hidden'>

apps/sim/components/page-header-bar.test.ts

@@ -1,18 +1,25 @@
 /**
- * The canonical top-of-page header bar worn by every workspace surface that puts a
- * back chip, tab switcher, or page actions above its content (settings, integrations,
- * skills, credential and block detail, upgrade).
+ * Top padding for a bar sitting at the very top of the workspace content pane.
  *
- * Single source of truth for that chrome — never re-derive the geometry per page. It
- * was previously copied verbatim into seven files, which is how every one of them came
- * to overlap the macOS traffic lights at once.
+ * Folds in `--workspace-content-title-bar-inset`, the height that pane must leave
+ * clear for the desktop shell's inset title bar. That variable is `0px` everywhere
+ * except the macOS desktop app with the sidebar collapsed — the one arrangement where
+ * the pane, rather than the sidebar, sits beneath the traffic lights and the sidebar
+ * expander. Without it a top bar draws underneath both, which hides its controls and
+ * can leave them unclickable.
  *
- * The top padding folds in `--workspace-content-title-bar-inset`, the height the
- * workspace content pane must leave clear for the desktop shell's inset title bar.
- * That variable is `0px` everywhere except the macOS desktop app with the sidebar
- * collapsed — the only arrangement where the content pane, rather than the sidebar,
- * sits beneath the traffic lights and the sidebar expander — so this is inert on the
- * web and costs consumers nothing.
+ * Compose this rather than writing `pt-[8.5px]`: the app has two top-bar geometries
+ * ({@link PAGE_HEADER_BAR} and the `Resource` header's bordered variant), and the lane
+ * math has to stay identical across them.
  */
-export const PAGE_HEADER_BAR =
-  'flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[calc(8.5px+var(--workspace-content-title-bar-inset))] pb-[8.5px]'
+export const TITLE_BAR_LANE_PT = 'pt-[calc(8.5px+var(--workspace-content-title-bar-inset))]'
+
+/**
+ * The top-of-page header bar worn by the surfaces that put a back chip, tab switcher,
+ * or page actions above their content. `Resource`-based pages (tables, files, logs,
+ * knowledge, scheduled tasks) use their own bordered bar and compose
+ * {@link TITLE_BAR_LANE_PT} directly.
+ *
+ * Single source of truth for this geometry — never re-derive it per page.
+ */
+export const PAGE_HEADER_BAR = `flex flex-shrink-0 items-center bg-[var(--bg)] px-4 ${TITLE_BAR_LANE_PT} pb-[8.5px]`