From 6e600fdbcd9d2913fe85da3fecd1deec1c989eed Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 16:50:34 +0200
Subject: [PATCH] fix: use ResizeObserver for more reliable terminal resize
 detection

Window resize events fire before CSS layout settles, so FitAddon
was reading stale container dimensions. ResizeObserver fires after
the element actually changes size, ensuring fit() gets correct
dimensions. Reduced debounce from 250ms to 100ms for snappier response.
---
 apps/web/src/components/terminal.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 38710d7..2235ca9 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -254,16 +254,15 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       ws.send(data);
     });
 
-    // Handle window resize with debounce
+    // Handle container resize with ResizeObserver (more reliable than window resize)
     let resizeTimeout: ReturnType<typeof setTimeout>;
-    const handleResize = () => {
+    const resizeObserver = new ResizeObserver(() => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
         fitTerminal();
-      }, 250);
-    };
-
-    window.addEventListener("resize", handleResize);
+      }, 100);
+    });
+    resizeObserver.observe(container);
 
     // Refit after mobile header auto-hides (3s delay + 0.3s transition)
     const headerHideTimeout = setTimeout(() => {
@@ -298,7 +297,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     return () => {
       clearTimeout(resizeTimeout);
       clearTimeout(headerHideTimeout);
-      window.removeEventListener("resize", handleResize);
+      resizeObserver.disconnect();
       document.removeEventListener("visibilitychange", handleVisibilityChange);
       if (ws) {
         ws.close();