fix(workflow): finalize drag on unmount + clamp reads scoped output width

- useDragResize: unmounting mid-drag now runs endDrag (commit + drop the
  scoped override) instead of a bare cleanup, so navigating away can neither
  lose the resize nor strand an inline override on a surviving target element.
- terminal output-panel clamp: read the live --output-panel-width from the
  terminal element first (where a drag writes its scoped override), then :root,
  then the store, so a mid-drag terminal/window resize can't clamp against a
  stale value.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx

@@ -1255,10 +1255,10 @@ export const Terminal = memo(function Terminal() {
   /**
    * Adjust output panel width on resize.
    * Closes the output panel if there's not enough space for the minimum width.
-   * The clamp compares against the live `--output-panel-width` CSS variable
-   * (the visual width — during a drag it runs ahead of the store, which only
-   * commits on release) so a resize mid-drag can never stomp the drag with a
-   * stale store value; the store value is the fallback before any write.
+   * The clamp compares against the live `--output-panel-width` — read from the
+   * terminal element first (where a drag writes its scoped override), then
+   * `:root` (the committed value), then the store — so a resize mid-drag can
+   * never stomp the drag with a stale value.
    */
   useEffect(() => {
     const el = terminalRef.current
@@ -1276,7 +1276,8 @@ export const Terminal = memo(function Terminal() {
       }
 
       const liveWidth = Number.parseFloat(
-        document.documentElement.style.getPropertyValue('--output-panel-width')
+        el.style.getPropertyValue('--output-panel-width') ||
+          document.documentElement.style.getPropertyValue('--output-panel-width')
       )
       const currentWidth = Number.isNaN(liveWidth) ? outputPanelWidth : liveWidth
       if (currentWidth > maxWidth) {

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

@@ -70,18 +70,21 @@ interface UseDragResizeOptions {
  * (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.
+ * rapid presses, and unmounting mid-drag finalizes it the same way a release
+ * does — committing the last value and dropping the scoped override — so
+ * navigating away can neither lose the resize nor strand the override on a
+ * surviving target element.
  */
 export function useDragResize(options: UseDragResizeOptions) {
-  const cleanupRef = useRef<(() => void) | null>(null)
+  const teardownRef = useRef<(() => void) | null>(null)
   const optionsRef = useRef(options)
 
   useEffect(() => {
     optionsRef.current = options
   }, [options])
 
   const handlePointerDown = useCallback((e: React.PointerEvent<HTMLElement>) => {
-    if (cleanupRef.current) return
+    if (teardownRef.current) return
     if (optionsRef.current.onStart?.() === false) return
 
     const handle = e.currentTarget
@@ -123,7 +126,7 @@ export function useDragResize(options: UseDragResizeOptions) {
       document.removeEventListener('pointerup', onPointerEnd)
       document.removeEventListener('pointercancel', onPointerEnd)
       window.removeEventListener('blur', endDrag)
-      cleanupRef.current = null
+      teardownRef.current = null
     }
 
     function endDrag() {
@@ -144,14 +147,14 @@ export function useDragResize(options: UseDragResizeOptions) {
       endDrag()
     }
 
-    cleanupRef.current = cleanup
+    teardownRef.current = endDrag
     document.addEventListener('pointermove', onPointerMove)
     document.addEventListener('pointerup', onPointerEnd)
     document.addEventListener('pointercancel', onPointerEnd)
     window.addEventListener('blur', endDrag)
   }, [])
 
-  useEffect(() => () => cleanupRef.current?.(), [])
+  useEffect(() => () => teardownRef.current?.(), [])
 
   return { handlePointerDown }
 }