fix(desktop): keep page headers clear of the traffic lights

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

@@ -14,6 +14,13 @@ 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'
+)
+const mothershipView = read(
+  '../workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx'
+)
 
 describe('desktop title-bar surface audit', () => {
   it('applies the safe-area shell only when the auth route is login', () => {
@@ -65,4 +72,70 @@ 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)
+    // The pane owns the lane in both arrangements where the sidebar is not there to
+    // own it: collapsed to zero width, and slid away for a fullscreen route (which
+    // leaves the sidebar expanded in the store, so the collapsed selector alone misses
+    // it and /upgrade's back chip lands under the traffic lights).
+    expect(globalStyles).toContain('.workspace-content-shell[data-sidebar-collapsed],')
+    expect(globalStyles).toContain('.workspace-content-shell[data-content-fullscreen] {')
+    expect(workspaceChrome).toContain('data-content-fullscreen={isFullscreen || undefined}')
+  })
+
+  it('sizes the peek card to its content, capped against the lane', () => {
+    // Pinning both edges made the card full height, so a short list (settings) left a
+    // tall empty slab over the content. It now hugs its content and caps at the pane
+    // height less the lane and the bottom gutter, so a long list still scrolls.
+    expect(workspaceChrome).toContain('max-h-[calc(100%-var(--desktop-title-bar-height)-8px)]')
+    expect(workspaceChrome).not.toMatch(/PEEK_CARD_CHROME[\s\S]{0,240}?bottom-2/)
+  })
+
+  it('reserves the login lane inside the box, never as a collapsing margin', () => {
+    // `body` carries `min-height: 100vh`, and a `margin-top` here collapses through it
+    // (body is a plain block box, so it opens no BFC) and displaces body itself. The
+    // document then measured one full lane taller than the viewport, which is what made
+    // the desktop login page scroll. Verified live: 40px of overflow, now 0.
+    // Comments are stripped first: the rule documents why `margin-top` is wrong, and a
+    // raw `not.toContain` would match that prose instead of a declaration.
+    const rule = (globalStyles.match(/\.desktop-title-bar-page \{[^}]*\}/)?.[0] ?? '').replace(
+      /\/\*[\s\S]*?\*\//g,
+      ''
+    )
+    expect(rule).toContain('padding-top: var(--desktop-title-bar-height)')
+    expect(rule).toContain('min-height: 100vh')
+    expect(rule).not.toContain('margin-top')
+  })
+
+  it('drops the content pane border where the pane meets the window edge', () => {
+    // Collapsing the sidebar in the desktop shell takes the pane's padding to 0, so a
+    // retained border and radius drew a hairline outline inset from the square window.
+    const flush = '[[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:'
+    expect(workspaceChrome).toContain(`${flush}rounded-none`)
+    expect(workspaceChrome).toContain(`${flush}border-0`)
+  })
+
+  it('clears the lane for panels that embed pages away from the lights', () => {
+    // The mothership panel is the right half of the pane and embeds whole pages
+    // (KnowledgeBase et al) whose header bars reserve the lane. It inherits the
+    // variable, so without this reset those bars gain the inset while sitting nowhere
+    // near the traffic lights.
+    expect(mothershipView).toContain('[--workspace-content-title-bar-inset:0px]')
+  })
+
+  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 */
@@ -43,7 +44,7 @@
   /* Shadow scale */
   --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
   --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
-  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.15);
+  --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.11);
   --shadow-kbd: 0 4px 0 0 rgba(48, 48, 48, 1);
   --shadow-kbd-sm: 0 2px 0 0 rgba(48, 48, 48, 1);
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
@@ -75,8 +76,14 @@ html[data-sim-desktop-title-bar="inset"] {
 
 /** The macOS desktop login shell reserves the native traffic-light lane. */
 .desktop-title-bar-page {
-  margin-top: var(--desktop-title-bar-height);
-  min-height: calc(100vh - var(--desktop-title-bar-height));
+  /* Reserve the lane with padding INSIDE the box, never `margin-top` + a
+     `calc(100vh - lane)` height. `body` carries `min-height: 100vh` of its own, and
+     a top margin here has nothing to collapse against (body is a block box with no
+     padding, border, or BFC), so it collapses through and displaces body itself —
+     leaving a document one full lane taller than the viewport. Global
+     `box-sizing: border-box` keeps this padding inside the 100vh. */
+  padding-top: var(--desktop-title-bar-height);
+  min-height: 100vh;
 }
 
 .desktop-window-drag-region {
@@ -122,11 +129,10 @@ 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] {
+/* The pane owns the lane whenever the sidebar is not there to own it: collapsed to
+   zero width, or slid away for a fullscreen route. */
+.workspace-content-shell[data-sidebar-collapsed],
+.workspace-content-shell[data-content-fullscreen] {
   --workspace-content-title-bar-inset: var(--desktop-title-bar-height);
 }
 
@@ -173,6 +179,14 @@ html[data-sim-desktop-title-bar="inset"]
   transition: none;
 }
 
+/* The card is a flex column sized to its content, so the shell must be allowed to
+   shrink for the sidebar's own scroll region to bound itself once the card hits its
+   max height. Docked, this element is not a flex item and the rule is inert. */
+.sidebar-shell-outer[data-peek] .sidebar-shell-inner {
+  min-height: 0;
+  flex-shrink: 1;
+}
+
 .sidebar-container span,
 .sidebar-container .text-small {
   transition: opacity 120ms ease;
@@ -583,7 +597,7 @@ html.sidebar-booting .sidebar-shell-inner {
     --scrollbar-thumb-hover-color: #6a6a6a;
 
     /* Shadow scale - dark */
-    --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.4);
+    --shadow-overlay: 0 10px 30px rgba(0, 0, 0, 0.3);
   }
 }
 

apps/sim/app/workspace/[workspaceId]/components/credential-detail/components/credential-detail-layout.tsx

@@ -1,4 +1,6 @@
 import type { ReactNode } from 'react'
+import { cn } from '@sim/emcn'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 interface CredentialDetailLayoutProps {
   /** Back link rendered at the start of the fixed action bar. */
@@ -17,7 +19,7 @@ interface CredentialDetailLayoutProps {
 export function CredentialDetailLayout({ back, actions, children }: CredentialDetailLayoutProps) {
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={cn(PAGE_HEADER_BAR, 'justify-between')}>
         {back}
         {actions ? <div className='flex items-center'>{actions}</div> : null}
       </div>

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/app/workspace/[workspaceId]/components/workspace-chrome/workspace-chrome.tsx

@@ -22,17 +22,26 @@ const SLIDE_TRANSITION =
  * The peek card's floating chrome.
  *
  * Every value is an existing token: `rounded-lg` is `--radius`, matching the content
- * pane it floats beside; `--border` is that pane's border; `shadow-overlay` and
- * `--z-modal` are what the app's other edge-anchored panels use. The card's fill is
- * the sidebar's own `--surface-1`, so docked and floating are the same surface.
+ * pane it floats beside; `--border` is that pane's border; `--z-modal` is what the
+ * app's other edge-anchored panels use. The card's fill is the sidebar's own
+ * `--surface-1`, so docked and floating are the same surface.
+ *
+ * Deliberately unshadowed. It separates on the same `--border` hairline the content
+ * pane beside it uses; `--shadow-overlay` reads as too heavy at this size, where the
+ * card abuts the window edge rather than floating over the middle of the page.
+ *
+ * The card hugs its content and caps at the pane height less the lane and the bottom
+ * gutter — pinning both edges left a tall empty slab below short lists. It is a flex
+ * column so the shell can shrink inside that cap and the sidebar's own scroll region
+ * still bounds itself; see the `[data-peek]` rule in `globals.css`.
  *
  * `w-auto` shrink-wraps the inner shell, which `[data-peek]` has already put at the
  * expanded width. It must not be a length: `width` cannot interpolate to or from
  * `auto`, so entering and leaving the peek snap instead of animating — otherwise the
  * card widens as it appears and leaves a shrinking ghost on retract.
  */
 const PEEK_CARD_CHROME =
-  'absolute top-[var(--desktop-title-bar-height)] bottom-2 left-2 z-[var(--z-modal)] w-auto origin-top-left rounded-lg border border-[var(--border)] shadow-overlay'
+  'absolute top-[var(--desktop-title-bar-height)] left-2 z-[var(--z-modal)] flex max-h-[calc(100%-var(--desktop-title-bar-height)-8px)] w-auto flex-col origin-top-left rounded-lg border border-[var(--border)]'
 
 /**
  * Peek card enter/exit — the popper idiom rather than a slide, since the card is
@@ -57,6 +66,20 @@ const PEEK_CARD_EXIT = cn(
 /** The docked rail: in flow, width-animated by the collapse toggle. */
 const SIDEBAR_SHELL_IN_FLOW = cn('transition-[width]', SLIDE_TRANSITION)
 
+/**
+ * The content pane's own chrome, dropped when the pane sits flush to the window.
+ *
+ * Collapsing the sidebar in the desktop shell takes the surrounding padding to `0`,
+ * which puts the pane hard against the window edge — and its border and radius then
+ * draw a hairline outline with rounded corners inset from the square window frame.
+ *
+ * Keyed off the ancestor attributes rather than React state on purpose: the title-bar
+ * attribute is written pre-paint, so a state-driven rule would flash the border on
+ * first paint before hydration settles.
+ */
+const CONTENT_PANE_FLUSH =
+  '[[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:rounded-none [[data-sim-desktop-title-bar=inset]_[data-sidebar-collapsed]_&]:border-0'
+
 interface WorkspaceChromeProps {
   children: React.ReactNode
   /** Cookie-derived collapse state from the server layout; seeds the sidebar's first render. */
@@ -295,8 +318,16 @@ export function WorkspaceChrome({
           isCollapsed && '[[data-sim-desktop-title-bar=inset]_&]:p-0'
         )}
         data-sidebar-collapsed={isCollapsed || undefined}
+        /* A fullscreen route slides the sidebar away without collapsing it, so the pane
+           inherits the traffic-light lane the same way a collapsed sidebar does. */
+        data-content-fullscreen={isFullscreen || undefined}
       >
-        <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+        <div
+          className={cn(
+            'flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]',
+            CONTENT_PANE_FLUSH
+          )}
+        >
           {children}
         </div>
       </div>

apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx

@@ -137,6 +137,10 @@ export const MothershipView = memo(
         className={cn(
           'relative z-10 flex h-full flex-col overflow-hidden border-[var(--border)] bg-[var(--bg)] transition-[width,min-width,border-width] duration-200 ease-[cubic-bezier(0.25,0.1,0.25,1)]',
           isCollapsed ? 'w-0 min-w-0 border-l-0' : 'w-1/2 border-l',
+          /* This panel is the right half of the pane, never under the traffic lights,
+             yet it embeds whole pages whose header bars reserve that lane. Zeroing the
+             inherited variable here keeps their top bars flush inside the panel. */
+          '[--workspace-content-title-bar-inset:0px]',
           className
         )}
       >

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail-fallback.tsx

@@ -2,6 +2,7 @@
 
 import { ChipLink } from '@sim/emcn'
 import { ArrowLeft } from 'lucide-react'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 interface IntegrationBlockDetailFallbackProps {
   workspaceId: string
@@ -23,7 +24,7 @@ export function IntegrationBlockDetailFallback({
 }: IntegrationBlockDetailFallbackProps) {
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={PAGE_HEADER_BAR}>
         <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
           Integrations
         </ChipLink>

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-block-detail.tsx

@@ -6,6 +6,7 @@ import { ArrowLeft, ArrowRight, Plus } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import {
   blockTypeToIconMap,
   type Integration,
@@ -138,7 +139,7 @@ export function IntegrationBlockDetail({ integration, workspaceId }: Integration
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={PAGE_HEADER_BAR}>
         <ChipLink href={`/workspace/${workspaceId}/integrations`} leftIcon={ArrowLeft}>
           Integrations
         </ChipLink>

apps/sim/app/workspace/[workspaceId]/integrations/components/integration-tabs-header/integration-tabs-header.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { ChipLink } from '@sim/emcn'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 interface IntegrationTabsHeaderProps {
   active: 'integrations' | 'skills'
@@ -18,7 +19,7 @@ export function IntegrationTabsHeader({
   rightSlot,
 }: IntegrationTabsHeaderProps) {
   return (
-    <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+    <div className={PAGE_HEADER_BAR}>
       <ChipLink href={`/workspace/${workspaceId}/integrations`} active={active === 'integrations'}>
         Integrations
       </ChipLink>

apps/sim/app/workspace/[workspaceId]/upgrade/upgrade.tsx

@@ -5,6 +5,7 @@ import { ArrowLeft, Chip, toast } from '@sim/emcn'
 import { getErrorMessage } from '@sim/utils/errors'
 import { useRouter } from 'next/navigation'
 import { useQueryState } from 'nuqs'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 import { useSession } from '@/lib/auth/auth-client'
 import {
   getUpgradeCardCta,
@@ -99,7 +100,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
 
     return (
       <div className='flex h-full flex-col bg-[var(--bg)]'>
-        <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+        <div className={PAGE_HEADER_BAR}>
           <Chip leftIcon={ArrowLeft} onClick={handleBack}>
             Back
           </Chip>
@@ -192,7 +193,7 @@ export function Upgrade({ workspaceId }: UpgradeProps) {
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={PAGE_HEADER_BAR}>
         <Chip leftIcon={ArrowLeft} onClick={handleBack}>
           Back
         </Chip>

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

@@ -0,0 +1,25 @@
+/**
+ * Top padding for a bar sitting at the very top of the workspace content pane.
+ *
+ * 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.
+ *
+ * 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 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]`

apps/sim/components/settings/settings-header.tsx

@@ -13,7 +13,8 @@ import {
   useRef,
   useState,
 } from 'react'
-import { Chip, ChipInput, ChipLink, Search, Tooltip } from '@sim/emcn'
+import { Chip, ChipInput, ChipLink, cn, Search, Tooltip } from '@sim/emcn'
+import { PAGE_HEADER_BAR } from '@/components/page-header-bar'
 
 const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect
 
@@ -123,7 +124,7 @@ export function SettingsHeaderShell({ children }: { children: ReactNode }) {
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
-      <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
+      <div className={cn(PAGE_HEADER_BAR, 'justify-between')}>
         {back ? (
           <Chip leftIcon={back.icon} onClick={() => configRef?.current.back?.onSelect()}>
             {back.text}