From caf11cdb8adcc12ef6637603d1b2a3874f033f0b Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 13:38:15 +0200
Subject: [PATCH] fix: improve terminal sizing with delayed fit and flex layout

- Use double requestAnimationFrame before initial fitAddon.fit() to ensure DOM is settled
- Add display: flex to mobile-terminal-content for proper child sizing
- Add width: 100% to terminal-wrapper.mobile
- Ensure terminal fills parent container both horizontally and vertically
---
 apps/web/src/components/terminal.tsx | 8 +++++++-
 apps/web/src/styles.css              | 3 +++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 8c3b236..63a5de5 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -163,11 +163,17 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     term.loadAddon(new WebLinksAddon());
 
     term.open(terminalRef.current);
-    fitAddon.fit();
 
     // Connect WebSocket
     const ws = connectWebSocket();
 
+    // Fit after layout settles - use rAF to ensure DOM is ready
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        fitAddon.fit();
+      });
+    });
+
     // Handle terminal input
     term.onData((data) => {
       if (ws.readyState !== WebSocket.OPEN) return;
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index f99fc42..5caf2ad 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -3074,6 +3074,8 @@ a.nav-item,
   min-height: 0;
   overflow: hidden;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Special Keys Strip */
@@ -3200,6 +3202,7 @@ a.nav-item,
   border-radius: 0;
   height: 100%;
   min-height: 100%;
+  width: 100%;
 }
 
 .terminal-wrapper.mobile .terminal-header {