style(chrome): drop the content card frame in floating-stage mode

The stacked cards floated inside the workspace chrome's bordered content
card, which framed the whole composition in an outline. A new non-persisted
isStageFloating flag on the sidebar store (set by the workflow shell while
the stack is card-forward) tells the chrome to drop the content card's
border/rounding and paint the backdrop in --surface-1, so the chat module
and stack cards float directly on chrome space. The frame returns the moment
the editor comes forward or the stack closes.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: andresdjasso

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

@@ -61,6 +61,7 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
   const openFlyout = useSidebarStore((s) => s.openFlyout)
   const scheduleFlyoutClose = useSidebarStore((s) => s.scheduleFlyoutClose)
   const closeFlyout = useSidebarStore((s) => s.closeFlyout)
+  const isStageFloating = useSidebarStore((s) => s.isStageFloating)
 
   // Hide the flyout after navigating from it.
   useEffect(() => {
@@ -134,8 +135,13 @@ export function WorkspaceChrome({ children }: WorkspaceChromeProps) {
       >
         <div
           className={cn(
-            'flex-1 overflow-hidden bg-[var(--bg)]',
-            (isFullscreen || !isCollapsed) && 'rounded-[8px] border border-[var(--border)]'
+            'flex-1 overflow-hidden',
+            // Floating-stage mode: the content renders as detached cards on
+            // the chrome backdrop, so the content card frame disappears.
+            isStageFloating ? 'bg-[var(--surface-1)]' : 'bg-[var(--bg)]',
+            (isFullscreen || !isCollapsed) &&
+              !isStageFloating &&
+              'rounded-[8px] border border-[var(--border)]'
           )}
         >
           {children}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/docked-chat/workflow-with-chat.tsx

@@ -18,6 +18,7 @@ import type {
 import Workflow from '@/app/workspace/[workspaceId]/w/[workflowId]/workflow'
 import { useWorkflows } from '@/hooks/queries/workflows'
 import { useMothershipTabsStore } from '@/stores/mothership-tabs/store'
+import { useSidebarStore } from '@/stores/sidebar/store'
 import { DockedChat } from './docked-chat'
 
 /** Sentinel `?chat=` value for a docked chat that hasn't been created yet. */
@@ -281,12 +282,19 @@ export function WorkflowWithChat() {
     return () => window.removeEventListener('resize', handleWindowResize)
   }, [])
 
-  if (!workspaceId || !workflowId) return null
-
   // Stacked-card mode: the stage stops being a panel — everything floats as
   // detached modules on the workspace chrome backdrop, chat included.
   const isStackMode = stackOpen && stageFront === 'card'
 
+  // The workspace chrome drops its content card frame while modules float.
+  const setStageFloating = useSidebarStore((s) => s.setStageFloating)
+  useEffect(() => {
+    setStageFloating(isStackMode)
+    return () => setStageFloating(false)
+  }, [isStackMode, setStageFloating])
+
+  if (!workspaceId || !workflowId) return null
+
   return (
     <div className={cn('flex h-full w-full', isStackMode && 'bg-[var(--surface-1)]')}>
       {dock.open && (

apps/sim/stores/sidebar/store.ts

@@ -53,6 +53,7 @@ export const useSidebarStore = create<SidebarState>()(
       sidebarWidth: SIDEBAR_WIDTH.DEFAULT,
       isCollapsed: false,
       isFlyoutOpen: false,
+      isStageFloating: false,
       _hasHydrated: false,
       setWorkspaceDropdownOpen: (isOpen) => set({ workspaceDropdownOpen: isOpen }),
       setSidebarWidth: (width) => {
@@ -106,6 +107,9 @@ export const useSidebarStore = create<SidebarState>()(
         if (clampedWidth !== sidebarWidth) set({ sidebarWidth: clampedWidth })
         applySidebarWidth(clampedWidth)
       },
+      setStageFloating: (floating) => {
+        if (get().isStageFloating !== floating) set({ isStageFloating: floating })
+      },
       setHasHydrated: (hasHydrated) => set({ _hasHydrated: hasHydrated }),
     }),
     {

apps/sim/stores/sidebar/types.ts

@@ -8,6 +8,12 @@ export interface SidebarState {
   isCollapsed: boolean
   /** Whether the hover flyout menu is showing while the sidebar is collapsed */
   isFlyoutOpen: boolean
+  /**
+   * The content area is in floating-stage mode (workflow stage stack): panes
+   * render as detached cards on the chrome backdrop, so the workspace chrome
+   * drops its content card frame entirely.
+   */
+  isStageFloating: boolean
   _hasHydrated: boolean
   setWorkspaceDropdownOpen: (isOpen: boolean) => void
   setSidebarWidth: (width: number) => void
@@ -32,5 +38,7 @@ export interface SidebarState {
    * default (e.g. soft navigation) or grew wider than a now-smaller window.
    */
   syncWidth: () => void
+  /** Enters/leaves floating-stage mode (see {@link SidebarState.isStageFloating}). */
+  setStageFloating: (floating: boolean) => void
   setHasHydrated: (hasHydrated: boolean) => void
 }