diff --git a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts b/apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts index 7a6c1e0fd93..b52acbc7605 100644 --- a/apps/sim/app/workspace/[workspaceId]/home/hooks/use-mothership-resize.ts +++ b/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(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) => { diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx index cde31c1c131..5eef2d85acc 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx +++ b/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 (