improvement(terminal): resize output panel on any layout change via ResizeObserver (#4220)

Replaces MutationObserver on document.documentElement (watching CSS variable
changes) + window resize listener with a ResizeObserver on the terminal element
itself. The terminal now measures its own rendered width directly, so it responds
correctly to all layout changes — sidebar, workflow panel, and mothership resize —
without indirect CSS variable plumbing or cross-component coupling.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts

@@ -12,7 +12,6 @@ import { MOTHERSHIP_WIDTH } from '@/stores/constants'
  */
 export function useMothershipResize() {
   const mothershipRef = useRef<HTMLDivElement | null>(null)
-  // Stored so the useEffect cleanup can tear down listeners if the component unmounts mid-drag
   const cleanupRef = useRef<(() => void) | null>(null)
 
   const handleResizePointerDown = useCallback((e: React.PointerEvent) => {

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

@@ -1246,20 +1246,14 @@ export const Terminal = memo(function Terminal() {
    * Closes the output panel if there's not enough space for the minimum width.
    */
   useEffect(() => {
+    const el = terminalRef.current
+    if (!el) return
+
     const handleResize = () => {
       if (!selectedEntry) return
 
-      const sidebarWidth = Number.parseInt(
-        getComputedStyle(document.documentElement).getPropertyValue('--sidebar-width') || '0'
-      )
-      const panelWidth = Number.parseInt(
-        getComputedStyle(document.documentElement).getPropertyValue('--panel-width') || '0'
-      )
-
-      const terminalWidth = window.innerWidth - sidebarWidth - panelWidth
-      const maxWidth = terminalWidth - TERMINAL_CONFIG.BLOCK_COLUMN_WIDTH_PX
+      const maxWidth = el.getBoundingClientRect().width - TERMINAL_CONFIG.BLOCK_COLUMN_WIDTH_PX
 
-      // Close output panel if there's not enough space for minimum width
       if (maxWidth < MIN_OUTPUT_PANEL_WIDTH_PX) {
         setAutoSelectEnabled(false)
         setSelectedEntryId(null)
@@ -1273,21 +1267,10 @@ export const Terminal = memo(function Terminal() {
 
     handleResize()
 
-    window.addEventListener('resize', handleResize)
-
-    const observer = new MutationObserver(() => {
-      handleResize()
-    })
+    const observer = new ResizeObserver(handleResize)
+    observer.observe(el)
 
-    observer.observe(document.documentElement, {
-      attributes: true,
-      attributeFilter: ['style'],
-    })
-
-    return () => {
-      window.removeEventListener('resize', handleResize)
-      observer.disconnect()
-    }
+    return () => observer.disconnect()
   }, [selectedEntry, outputPanelWidth, setOutputPanelWidth])
 
   return (