fix(workflow): make notifications track panel and terminal resize live

The toast stack insets by --panel-width / --terminal-height, but a resize drag
writes those to the resized subtree only (.panel-container / .terminal-container)
rather than to :root, because a custom-property write on :root recalculates the
whole document (~150x slower). The stack is portalled to <body>, so it shares no
ancestor with either and kept reading the stale :root value — it held its
pre-drag position and jumped once the drag committed, while the canvas controls,
which are laid out inside the shrinking canvas, tracked the drag in realtime.

useDragResize now accepts several target subtrees and writes each one, so the
scoped recalc is preserved and every consumer follows the drag frame by frame.
The stack is found through a new data-toast-viewport attribute.

Also drops the canvas controls from bottom-4 to bottom-2: the toast clears the
terminal by 8px (it anchors from the viewport, and the terminal is inset by
CONTENT_WINDOW_GAP), where the controls measure from the canvas floor and so
sat at twice the gap.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts

@@ -13,9 +13,18 @@ function computePanelWidth(ev: PointerEvent): number {
   return Math.min(Math.max(newWidth, PANEL_WIDTH.MIN), maxWidth)
 }
 
-/** The `.panel-container` element sizes itself from `--panel-width`. */
-function getPanelContainer(): HTMLElement | null {
-  return document.querySelector<HTMLElement>('.panel-container')
+/**
+ * Every subtree that reads `--panel-width`: the `.panel-container` the drag
+ * resizes, and the toast stack, which insets its right edge by the same
+ * variable but is portalled to `<body>` and so shares no ancestor with it.
+ * Writing both keeps the notifications tracking the drag frame by frame instead
+ * of jumping once it commits.
+ */
+function getPanelWidthConsumers(): (HTMLElement | null)[] {
+  return [
+    document.querySelector<HTMLElement>('.panel-container'),
+    document.querySelector<HTMLElement>('[data-toast-viewport]'),
+  ]
 }
 
 /**
@@ -33,7 +42,7 @@ export function usePanelResize() {
   return useDragResize({
     cursor: 'ew-resize',
     cssVar: '--panel-width',
-    getTarget: getPanelContainer,
+    getTarget: getPanelWidthConsumers,
     compute: computePanelWidth,
     commit: setPanelWidth,
   })

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts

@@ -13,9 +13,18 @@ function computeTerminalHeight(ev: PointerEvent): number {
   return Math.min(Math.max(newHeight, TERMINAL_HEIGHT.MIN), maxHeight)
 }
 
-/** The `.terminal-container` element sizes itself from `--terminal-height`. */
-function getTerminalContainer(): HTMLElement | null {
-  return document.querySelector<HTMLElement>('.terminal-container')
+/**
+ * Every subtree that reads `--terminal-height`: the `.terminal-container` the
+ * drag resizes, and the toast stack, which insets its bottom by the same
+ * variable but is portalled to `<body>` and so shares no ancestor with it.
+ * Writing both keeps the notifications tracking the drag frame by frame instead
+ * of jumping once it commits.
+ */
+function getTerminalHeightConsumers(): (HTMLElement | null)[] {
+  return [
+    document.querySelector<HTMLElement>('.terminal-container'),
+    document.querySelector<HTMLElement>('[data-toast-viewport]'),
+  ]
 }
 
 /**
@@ -49,7 +58,7 @@ export function useTerminalResize() {
   return useDragResize({
     cursor: 'ns-resize',
     cssVar: '--terminal-height',
-    getTarget: getTerminalContainer,
+    getTarget: getTerminalHeightConsumers,
     compute: computeTerminalHeight,
     commit: setTerminalHeight,
     onApply: syncExpandedThreshold,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx

@@ -92,7 +92,14 @@ export const WorkflowControls = memo(function WorkflowControls() {
   return (
     <>
       <div
-        className='absolute bottom-4 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-1'
+        /*
+         * `bottom-2`, not `bottom-4`, to sit the same 8px above the terminal
+         * that the toast stack does. The toast anchors from the viewport at
+         * `--terminal-height + 16px` while the terminal itself is inset by
+         * CONTENT_WINDOW_GAP (8px), so its visible gap is 8 — these controls
+         * measure from the canvas floor, where 16px read as twice the distance.
+         */
+        className='absolute bottom-2 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-2)] p-1'
         onContextMenu={handleContextMenu}
       >
         {/* Canvas Mode Selector */}

apps/sim/hooks/use-drag-resize.ts

@@ -15,8 +15,16 @@ interface UseDragResizeOptions {
    * every custom-property write recalculates the whole tree (~150x slower).
    * Captured once on drag start; a `null` return falls back to
    * `document.documentElement`.
+   *
+   * Return an ARRAY when consumers live in sibling subtrees with no useful
+   * common ancestor — the toast stack is portalled to `<body>`, so it shares
+   * one only with `:root`. Writing each subtree separately keeps the scoped
+   * recalc and, more importantly, keeps those consumers tracking the drag live;
+   * a consumer left off this list reads the stale `:root` value and only
+   * catches up when the drag commits. Elements that are absent (`null`) or
+   * repeated are ignored.
    */
-  getTarget: () => HTMLElement | null
+  getTarget: () => HTMLElement | null | (HTMLElement | null)[]
   /**
    * Maps a pointer position to the clamped target dimension, or `null` to
    * ignore the move. Runs at most once per animation frame (before the write,
@@ -90,7 +98,13 @@ export function useDragResize(options: UseDragResizeOptions) {
     const handle = e.currentTarget
     const pointerId = e.pointerId
     const { cssVar } = optionsRef.current
-    const target = optionsRef.current.getTarget() ?? document.documentElement
+    const resolved = optionsRef.current.getTarget()
+    const targets = [
+      ...new Set((Array.isArray(resolved) ? resolved : [resolved]).filter((el) => el !== null)),
+    ]
+    if (targets.length === 0) targets.push(document.documentElement)
+    /** Liveness is judged on the primary target — the one the drag resizes. */
+    const target = targets[0]
     document.body.style.cursor = optionsRef.current.cursor
     document.body.style.userSelect = 'none'
     handle.setPointerCapture?.(pointerId)
@@ -100,7 +114,7 @@ export function useDragResize(options: UseDragResizeOptions) {
     let lastApplied: number | null = null
 
     const applyValue = (value: number) => {
-      target.style.setProperty(cssVar, `${value}px`)
+      for (const el of targets) el.style.setProperty(cssVar, `${value}px`)
       lastApplied = value
       optionsRef.current.onApply?.(value)
     }
@@ -144,7 +158,9 @@ export function useDragResize(options: UseDragResizeOptions) {
       }
       if (lastApplied !== null) {
         optionsRef.current.commit(lastApplied)
-        if (target !== document.documentElement) target.style.removeProperty(cssVar)
+        for (const el of targets) {
+          if (el !== document.documentElement) el.style.removeProperty(cssVar)
+        }
       }
       optionsRef.current.onEnd?.()
     }

packages/emcn/src/components/toast/toast.tsx

@@ -590,6 +590,15 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
                   aria-live='polite'
                   aria-label='Notifications'
                   data-native-surface-overlay=''
+                  /*
+                   * The stack is portalled to `<body>`, so it shares no ancestor
+                   * with the panel or terminal it insets by. A resize drag writes
+                   * `--panel-width` / `--terminal-height` to each consuming
+                   * subtree rather than to `:root`; this attribute is how it
+                   * finds this one, and without it the stack would hold the
+                   * pre-drag position until the drag commits.
+                   */
+                  data-toast-viewport=''
                   className='fixed z-[var(--z-toast)] m-0 list-none p-0'
                   exit={{
                     opacity: 0,