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

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

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 {