From 8f7e19fdb1222588eb362147f4707dd5b2d17ebb Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 15:02:40 +0200
Subject: [PATCH] fix: remove conflicting CSS that broke terminal sizing

- Remove second .terminal-wrapper.mobile definition that overrode position:absolute
- Add flex display to .xterm for proper viewport filling
- Add position:relative to mobile terminal-container
- Remove manual dimension setting workaround from terminal.tsx
- Root cause: CSS specificity conflict caused FitAddon to read height=0
---
 apps/web/src/components/terminal.tsx | 10 +---------
 apps/web/src/styles.css              | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 308d02a..e49955d 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -197,15 +197,7 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     term.loadAddon(fitAddon);
     term.loadAddon(new WebLinksAddon());
 
-    // Ensure container has explicit dimensions before xterm initializes
-    const container = terminalRef.current;
-    const parentRect = container.parentElement?.getBoundingClientRect();
-    if (parentRect) {
-      container.style.width = `${parentRect.width}px`;
-      container.style.height = `${parentRect.height}px`;
-    }
-
-    term.open(container);
+    term.open(terminalRef.current);
 
     // Connect WebSocket
     const ws = connectWebSocket();
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index d560c51..1f1f9b5 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -3204,12 +3204,21 @@ a.nav-item,
   height: 100%;
   padding: 0;
   overflow: hidden;
+  position: relative;
 }
 
 /* xterm fills container */
 .terminal-wrapper.mobile .terminal-container .xterm {
   width: 100%;
   height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.terminal-wrapper.mobile .terminal-container .xterm-viewport {
+  flex: 1;
+  width: 100% !important;
+  height: 100% !important;
 }
 
 /* Special Keys Strip */
@@ -3331,14 +3340,7 @@ a.nav-item,
 }
 
 /* Terminal Component Updates */
-.terminal-wrapper.mobile {
-  border: none;
-  border-radius: 0;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  overflow: hidden;
-}
+/* Note: .terminal-wrapper.mobile is defined above with position: absolute to fill grid cell */
 
 .terminal-wrapper.mobile .terminal-header {
   display: none;