From 7b23618ae72ca2b9fe5d68a1fbd7aa711e19609f Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 17:03:25 +0200
Subject: [PATCH] fix: use requestAnimationFrame before fit() on window resize

When window resize fires, CSS layout hasn't settled yet. Adding
requestAnimationFrame ensures the browser has calculated new sizes
before xterm.js fit() reads the container dimensions. Reduced
debounce from 250ms to 100ms since rAF handles the layout timing.
---
 apps/web/src/components/terminal.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 38710d7..d398064 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -254,13 +254,15 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       ws.send(data);
     });
 
-    // Handle window resize with debounce
+    // Handle window resize with debounce - use rAF to ensure layout settled
     let resizeTimeout: ReturnType<typeof setTimeout>;
     const handleResize = () => {
       clearTimeout(resizeTimeout);
       resizeTimeout = setTimeout(() => {
-        fitTerminal();
-      }, 250);
+        requestAnimationFrame(() => {
+          fitTerminal();
+        });
+      }, 100);
     };
 
     window.addEventListener("resize", handleResize);