perf(workflow): scope resize CSS-var writes to the container, not :root

waleedlatif1 · waleedlatif1 · commit 67420f45d427 · 2026-07-17T12:19:50.000-07:00
Resizing the editor panel, terminal, output panel, and sidebar was still
laggy on large workflows even after the drag handles stopped re-rendering
React per frame. A CDP trace showed the cost was style recalculation, not
JS or layout: ~3.9s of Document::recalcStyle over a 50-move panel drag.

Root cause: each drag frame wrote its CSS variable to document.documentElement.
On a large document (~42k elements) any inline custom-property write on the
&lt;html&gt; root recalculates style for the whole tree — measured at ~77ms per
write, independent of what actually reads the variable (an unused var costs
the same). Writing the same variable to the element that consumes it recalcs
only that subtree (~0.5ms) — a ~150x reduction.

useDragResize now writes the variable to a caller-provided target element
during the drag and reconciles to :root once on release (so on-demand readers
and the pre-hydration script are unchanged): panel -&gt; .panel-container,
terminal -&gt; .terminal-container, output panel -&gt; .terminal-container (both
consumers inherit it), sidebar -&gt; .sidebar-shell-outer. The terminal's
expanded-threshold sync writes store state directly instead of setTerminalHeight
so it no longer touches :root mid-drag.

Measured (near-empty canvas, 50-move drag): panel style+layout 3891ms -&gt; 56ms,
frame p95 91.6ms -&gt; 8.4ms, main-thread blocking 4566ms -&gt; 0ms; terminal
recalc 3899ms -&gt; 16ms, blocking 5558ms -&gt; 0ms; sidebar recalc ~77ms/frame -&gt; ~1ms/frame.
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/hooks/use-panel-resize.ts
@@ -13,18 +13,17 @@ function computePanelWidth(ev: PointerEvent): number {
   return Math.min(Math.max(newWidth, PANEL_WIDTH.MIN), maxWidth)
 }
 
-/**
- * Applies the panel width per frame. The `--panel-width` CSS variable alone
- * sizes `.panel-container`, so no React work happens during the drag.
- */
-function applyPanelWidth(width: number): void {
-  document.documentElement.style.setProperty('--panel-width', `${width}px`)
+/** The `.panel-container` element sizes itself from `--panel-width`. */
+function getPanelContainer(): HTMLElement | null {
+  return document.querySelector<HTMLElement>('.panel-container')
 }
 
 /**
- * Handles panel drag-resize with zero React renders during the drag.
- * The final width is committed to the store (one re-render + one
- * localStorage write) when the drag ends.
+ * Handles panel drag-resize with zero React renders during the drag. The
+ * `--panel-width` variable is written to `.panel-container` (a scoped style
+ * recalc) rather than `:root` (a whole-document recalc), and the final width
+ * is committed to the store (one re-render + one localStorage write) when the
+ * drag ends.
  *
  * @returns Pointer-down handler for the resize handle
  */
@@ -33,8 +32,9 @@ export function usePanelResize() {
 
   return useDragResize({
     cursor: 'ew-resize',
+    cssVar: '--panel-width',
+    getTarget: getPanelContainer,
     compute: computePanelWidth,
-    apply: applyPanelWidth,
     commit: setPanelWidth,
   })
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-output-panel-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-output-panel-resize.ts
@@ -3,32 +3,25 @@ import { useDragResize } from '@/hooks/use-drag-resize'
 import { OUTPUT_PANEL_WIDTH, TERMINAL_BLOCK_COLUMN_WIDTH } from '@/stores/constants'
 import { useTerminalStore } from '@/stores/terminal'
 
-/**
- * Applies the output panel width per frame. The `--output-panel-width` CSS
- * variable alone sizes the output panel and its sibling logs column, so no
- * React work happens during the drag.
- */
-function applyOutputPanelWidth(width: number): void {
-  document.documentElement.style.setProperty('--output-panel-width', `${width}px`)
-}
-
 /**
  * Handles the terminal output panel drag-resize with zero React renders
- * during the drag. The terminal element is captured once on drag start and
- * its rect is re-read per frame (rAF-aligned, before the CSS-var write), so
- * the clamp stays correct even if the terminal resizes mid-drag. The final
- * width is committed to the store (one re-render + one localStorage write)
- * when the drag ends.
+ * during the drag. `--output-panel-width` is written to `.terminal-container`
+ * (which both the output panel and its sibling logs column inherit from) — a
+ * scoped style recalc rather than a whole-document one on `:root`. The
+ * terminal rect is re-read per frame (rAF-aligned, before the write), so the
+ * clamp stays correct even if the terminal resizes mid-drag. The final width
+ * is committed to the store (one re-render + one localStorage write) when the
+ * drag ends.
  *
  * @returns Pointer-down handler for the resize handle
  */
 export function useOutputPanelResize() {
   const setOutputPanelWidth = useTerminalStore((s) => s.setOutputPanelWidth)
-  const terminalElRef = useRef<Element | null>(null)
+  const terminalElRef = useRef<HTMLElement | null>(null)
 
-  const captureTerminalElement = useCallback(() => {
-    terminalElRef.current = document.querySelector('[aria-label="Terminal"]')
-    return terminalElRef.current !== null
+  const getTerminalElement = useCallback(() => {
+    terminalElRef.current = document.querySelector<HTMLElement>('.terminal-container')
+    return terminalElRef.current
   }, [])
 
   const computeOutputPanelWidth = useCallback((ev: PointerEvent) => {
@@ -42,9 +35,9 @@ export function useOutputPanelResize() {
 
   return useDragResize({
     cursor: 'ew-resize',
+    cssVar: '--output-panel-width',
+    getTarget: getTerminalElement,
     compute: computeOutputPanelWidth,
-    apply: applyOutputPanelWidth,
     commit: setOutputPanelWidth,
-    onStart: captureTerminalElement,
   })
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/hooks/use-terminal-resize.ts
@@ -13,26 +13,33 @@ 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')
+}
+
 /**
- * Applies the terminal height per frame. The `--terminal-height` CSS
- * variable alone sizes `.terminal-container`, so no React work happens on
- * ordinary frames. The store is committed mid-drag only when the height
- * crosses the expanded threshold, so `isExpanded` subscribers (header
- * chevron, auto-open logic) still flip live during the drag.
+ * Updates the store height mid-drag only when it crosses the expanded
+ * threshold, so `isExpanded` subscribers (header chevron, auto-open logic)
+ * still flip live during the drag. Writes store state directly rather than
+ * calling `setTerminalHeight` so it does not also write `--terminal-height` to
+ * `:root` (a whole-document recalc) — the scoped CSS-var write handled by
+ * {@link useDragResize} already drives the visual, and the final value is
+ * persisted through `setTerminalHeight` on release.
  */
-function applyTerminalHeight(height: number): void {
-  document.documentElement.style.setProperty('--terminal-height', `${height}px`)
-
-  const store = useTerminalStore.getState()
-  const wasExpanded = store.terminalHeight > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD
+function syncExpandedThreshold(height: number): void {
+  const wasExpanded =
+    useTerminalStore.getState().terminalHeight > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD
   const nowExpanded = height > TERMINAL_CONFIG.NEAR_MIN_THRESHOLD
-  if (wasExpanded !== nowExpanded) store.setTerminalHeight(height)
+  if (wasExpanded !== nowExpanded) useTerminalStore.setState({ terminalHeight: height })
 }
 
 /**
  * Handles terminal drag-resize with zero React renders during the drag
- * (except at expanded-threshold crossings). The final height is committed
- * to the store (one re-render + one localStorage write) when the drag ends.
+ * (except at expanded-threshold crossings). The `--terminal-height` variable
+ * is written to `.terminal-container` (a scoped style recalc) rather than
+ * `:root` (a whole-document recalc), and the final height is committed to the
+ * store (one re-render + one localStorage write) when the drag ends.
  *
  * @returns Pointer-down handler for the resize handle
  */
@@ -41,8 +48,10 @@ export function useTerminalResize() {
 
   return useDragResize({
     cursor: 'ns-resize',
+    cssVar: '--terminal-height',
+    getTarget: getTerminalContainer,
     compute: computeTerminalHeight,
-    apply: applyTerminalHeight,
     commit: setTerminalHeight,
+    onApply: syncExpandedThreshold,
   })
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/hooks/use-sidebar-resize.ts
@@ -12,10 +12,14 @@ import { useSidebarStore } from '@/stores/sidebar/store'
  *                add `is-resizing` class directly to the DOM (no React
  *                round-trip, so the CSS width transition is suppressed from the
  *                very first frame)
- * pointermove  → write to --sidebar-width inside a requestAnimationFrame
- *                callback (aligns work with the browser paint cycle)
+ * pointermove  → write --sidebar-width to `.sidebar-shell-outer` (the element
+ *                that sizes the rail) inside a requestAnimationFrame callback.
+ *                Scoping the variable to that subtree keeps the style recalc
+ *                local; writing it to `:root` instead forces a whole-document
+ *                recalc (~150x slower on a large canvas).
  * pointerup    → cancel any pending RAF, tear down, persist final width to
- *                Zustand once (one React re-render to save to localStorage)
+ *                Zustand once (writes the authoritative `:root` value for
+ *                on-demand readers), then drop the scoped override
  *
  * The drag is torn down by `pointerup`, `pointercancel`, or window `blur`, so an
  * interrupted gesture (release outside the window, alt-tab, context menu, the OS
@@ -36,20 +40,24 @@ export function useSidebarResize() {
       const handle = e.currentTarget
       const pointerId = e.pointerId
       const sidebar = document.querySelector<HTMLElement>('.sidebar-container')
+      const shell = document.querySelector<HTMLElement>('.sidebar-shell-outer')
+      const target = shell ?? document.documentElement
       sidebar?.classList.add('is-resizing')
       document.documentElement.classList.add('sidebar-resizing')
       document.body.style.cursor = 'ew-resize'
       document.body.style.userSelect = 'none'
       handle.setPointerCapture?.(pointerId)
 
       let rafId: number | null = null
+      let lastWidth: number | null = null
 
       const onPointerMove = (ev: PointerEvent) => {
         if (rafId !== null) cancelAnimationFrame(rafId)
         rafId = requestAnimationFrame(() => {
           const max = Math.max(SIDEBAR_WIDTH.MIN, window.innerWidth * SIDEBAR_WIDTH.MAX_PERCENTAGE)
           const clamped = Math.min(Math.max(ev.clientX, SIDEBAR_WIDTH.MIN), max)
-          document.documentElement.style.setProperty('--sidebar-width', `${clamped}px`)
+          target.style.setProperty('--sidebar-width', `${clamped}px`)
+          lastWidth = clamped
           rafId = null
         })
       }
@@ -73,9 +81,10 @@ export function useSidebarResize() {
 
       function endDrag() {
         cleanup()
-        const raw = document.documentElement.style.getPropertyValue('--sidebar-width')
-        const finalWidth = Number.parseFloat(raw)
-        if (!Number.isNaN(finalWidth)) setSidebarWidth(finalWidth)
+        if (lastWidth !== null) {
+          setSidebarWidth(lastWidth)
+          if (target !== document.documentElement) target.style.removeProperty('--sidebar-width')
+        }
       }
 
       cleanupRef.current = cleanup
diff --git a/apps/sim/hooks/use-drag-resize.ts b/apps/sim/hooks/use-drag-resize.ts
@@ -3,27 +3,42 @@ import { useCallback, useEffect, useRef } from 'react'
 interface UseDragResizeOptions {
   /** Cursor applied to the document body for the duration of the drag */
   cursor: 'ew-resize' | 'ns-resize'
+  /**
+   * The CSS custom property this drag drives (e.g. `--panel-width`). During
+   * the drag it is written as `${value}px`.
+   */
+  cssVar: string
+  /**
+   * Returns the element that consumes {@link cssVar} (or an ancestor of every
+   * consumer). During the drag the variable is written here — a style recalc
+   * scoped to that subtree — instead of on `:root`, where on a large document
+   * every custom-property write recalculates the whole tree (~150x slower).
+   * Captured once on drag start; a `null` return falls back to
+   * `document.documentElement`.
+   */
+  getTarget: () => 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 `apply`,
+   * ignore the move. Runs at most once per animation frame (before the write,
    * so a layout read here happens against clean layout) and once more on
    * release, so it may read layout but must stay cheap.
    */
   compute: (ev: PointerEvent) => number | null
   /**
-   * Applies per-frame visual feedback (typically a CSS variable write).
-   * Invoked inside requestAnimationFrame, at most once per frame.
+   * Persists the final value once when the drag ends. Should write the
+   * authoritative value to `:root` (typically via the store setter) so
+   * on-demand readers of {@link cssVar} stay correct; the scoped override is
+   * then removed. Not called when the pointer never moved (a plain click).
    */
-  apply: (value: number) => void
+  commit: (value: number) => void
   /**
-   * Persists the final value once when the drag ends. Not called when the
-   * pointer never moved (a plain click on the handle).
+   * Optional per-frame hook invoked after the variable is written (e.g. the
+   * terminal's expanded-threshold store sync). Runs inside the rAF callback.
    */
-  commit: (value: number) => void
+  onApply?: (value: number) => void
   /**
-   * Optional drag-start hook (e.g. capture an anchor element, set a store
-   * flag). Return `false` to abort the drag before any listeners are
-   * attached.
+   * Optional drag-start hook (e.g. set a resize class). Return `false` to
+   * abort the drag before any listeners are attached.
    */
   onStart?: () => boolean | undefined
   /** Optional drag-end hook, invoked after teardown and commit */
@@ -37,22 +52,25 @@ interface UseDragResizeOptions {
  *
  * pointerdown  → capture the pointer on the handle (so move/up keep arriving
  *                even when the cursor leaves the window or crosses an iframe)
+ *                and capture the scoped target element (see {@link
+ *                UseDragResizeOptions.getTarget})
  * pointermove  → remember the latest pointer event and schedule a
  *                requestAnimationFrame callback that `compute`s the clamped
- *                value from it and `apply`s it, so both any layout read and
- *                the DOM write align with the browser paint cycle
- * pointerup    → tear down, `compute` the final value from the latest
- *                pointer event, `apply` and `commit` it once — deriving the
- *                final value from the event (rather than reading state back
- *                out of the DOM) means a fast single-frame flick is never
- *                lost to a cancelled RAF
+ *                value from it and writes `cssVar` to the target element, so
+ *                both any layout read and the DOM write align with the browser
+ *                paint cycle
+ * pointerup    → tear down, `compute` the final value from the latest pointer
+ *                event, write it, `commit` it once, then drop the scoped
+ *                override so the committed `:root` value takes over — deriving
+ *                the final value from the event (rather than reading state back
+ *                out of the DOM) means a fast single-frame flick is never lost
+ *                to a cancelled RAF
  *
- * The drag is torn down by `pointerup`/`pointercancel` of the captured
- * pointer (other pointers are ignored, so a second touch cannot kill the
- * gesture) or window `blur`, so an interrupted gesture can never leave the
- * listeners or body cursor stuck. A single-flight guard prevents stacking
- * listeners across rapid presses, and an unmount cleanup tears down a drag
- * still in flight.
+ * The drag is torn down by `pointerup`/`pointercancel` of the captured pointer
+ * (other pointers are ignored, so a second touch cannot kill the gesture) or
+ * window `blur`, so an interrupted gesture can never leave the listeners or
+ * body cursor stuck. A single-flight guard prevents stacking listeners across
+ * rapid presses, and an unmount cleanup tears down a drag still in flight.
  */
 export function useDragResize(options: UseDragResizeOptions) {
   const cleanupRef = useRef<(() => void) | null>(null)
@@ -68,21 +86,28 @@ export function useDragResize(options: UseDragResizeOptions) {
 
     const handle = e.currentTarget
     const pointerId = e.pointerId
+    const { cssVar } = optionsRef.current
+    const target = optionsRef.current.getTarget() ?? document.documentElement
     document.body.style.cursor = optionsRef.current.cursor
     document.body.style.userSelect = 'none'
     handle.setPointerCapture?.(pointerId)
 
     let rafId: number | null = null
     let lastEvent: PointerEvent | null = null
 
+    const applyValue = (value: number) => {
+      target.style.setProperty(cssVar, `${value}px`)
+      optionsRef.current.onApply?.(value)
+    }
+
     const onPointerMove = (ev: PointerEvent) => {
       if (ev.pointerId !== pointerId) return
       lastEvent = ev
       rafId ??= requestAnimationFrame(() => {
         rafId = null
         if (lastEvent === null) return
         const value = optionsRef.current.compute(lastEvent)
-        if (value !== null) optionsRef.current.apply(value)
+        if (value !== null) applyValue(value)
       })
     }
 
@@ -106,8 +131,9 @@ export function useDragResize(options: UseDragResizeOptions) {
       if (lastEvent !== null) {
         const value = optionsRef.current.compute(lastEvent)
         if (value !== null) {
-          optionsRef.current.apply(value)
+          applyValue(value)
           optionsRef.current.commit(value)
+          if (target !== document.documentElement) target.style.removeProperty(cssVar)
         }
       }
       optionsRef.current.onEnd?.()
