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

@@ -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
+    term.open(terminalRef.current);
-    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);
 
     // Connect WebSocket
     const ws = connectWebSocket();

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 {
+/* Note: .terminal-wrapper.mobile is defined above with position: absolute to fill grid cell */
-  border: none;
-  border-radius: 0;
-  flex: 1;
-  min-height: 0;
-  width: 100%;
-  overflow: hidden;
-}
 
 .terminal-wrapper.mobile .terminal-header {
   display: none;