fix(desktop): size the peek card to its content, soften the overlay shadow

The floating sidebar pinned both its top and bottom edges, so it always drew at
full window height. On a short surface — the settings list — that left a tall
empty slab of card hanging below the last entry.

The card now hugs its content and caps at the pane height less the traffic-light
lane and the bottom gutter. Dropping the bottom pin is most of it: the four
`h-full` rules down the chain resolve against an auto-height parent and collapse
to content on their own. But nothing would then bound the sidebar's own
`flex-1 overflow-y-auto` region, so a long workflow list would be clipped by the
card's `overflow-hidden` instead of scrolling. The card is therefore a capped
flex column, and the shell is allowed to shrink inside it, which restores a
definite height for the chain to resolve against. That rule is scoped to
`[data-peek]` and is inert while docked, where the shell is not a flex item.

Also eases `--shadow-overlay` in both themes (alpha ~27% lighter, bloom pulled in
from 48px to 30px), keeping it clearly above `--shadow-medium` so the scale still
reads in order. The peek card drops the shadow entirely and separates on the same
`--border` hairline the content pane beside it uses.

Author: waleedlatif1

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

@@ -88,6 +88,14 @@ describe('desktop title-bar surface audit', () => {
     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('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

apps/sim/app/_styles/globals.css

@@ -44,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);
@@ -173,6 +173,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 +591,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/workspace-chrome/workspace-chrome.tsx

@@ -32,7 +32,7 @@ const SLIDE_TRANSITION =
  * 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