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

@@ -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);
       });
     });
 

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%;
+  flex: 1;
-  min-height: 100%;
+  min-height: 0;
   width: 100%;
+  overflow: hidden;
 }
 
 .terminal-wrapper.mobile .terminal-header {