From f065e2b8c002b4d1ac40c7a7b7b50ea8052502c4 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 14:05:23 +0200
Subject: [PATCH] fix: terminal sizing and container overflow

- Change .terminal-wrapper.mobile from height:100% to flex:1 for proper flex behavior
- Add explicit width/height to xterm-viewport and xterm-screen to prevent overflow
- Add delayed fit() at 4s to resize after mobile header auto-hides
- Remove min-height:100% which caused overflow issues
---
 apps/web/src/components/terminal.tsx | 15 +++++++++++++++
 apps/web/src/styles.css              | 15 +++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index f050f76..a273930 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -185,6 +185,21 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
             );
           }
         }, 500);
+
+        // Fit after mobile header auto-hides (3s delay + 0.3s transition)
+        setTimeout(() => {
+          fitAddon.fit();
+          const { cols, rows } = term;
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(
+              JSON.stringify({
+                type: "resize",
+                cols,
+                rows,
+              })
+            );
+          }
+        }, 4000);
       });
     });
 
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 957804f..95b9933 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2599,6 +2599,16 @@ a.nav-item,
 .terminal-container .xterm {
   flex: 1;
   min-height: 0;
+  width: 100%;
+}
+
+.terminal-container .xterm-viewport {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.terminal-container .xterm-screen {
+  width: 100% !important;
 }
 
 .terminal-container .xterm-viewport {
@@ -3195,9 +3205,10 @@ a.nav-item,
 .terminal-wrapper.mobile {
   border: none;
   border-radius: 0;
-  height: 100%;
-  min-height: 100%;
+  flex: 1;
+  min-height: 0;
   width: 100%;
+  overflow: hidden;
 }
 
 .terminal-wrapper.mobile .terminal-header {