diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 63a5de5..a6eddf1 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -167,10 +167,24 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     // Connect WebSocket
     const ws = connectWebSocket();
 
-    // Fit after layout settles - use rAF to ensure DOM is ready
+    // Fit after layout settles - use rAF + timeout to ensure DOM is ready
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         fitAddon.fit();
+        // Force a second fit after layout fully settles
+        setTimeout(() => {
+          fitAddon.fit();
+          const { cols, rows } = term;
+          if (ws.readyState === WebSocket.OPEN) {
+            ws.send(
+              JSON.stringify({
+                type: "resize",
+                cols,
+                rows,
+              })
+            );
+          }
+        }, 500);
       });
     });
 
@@ -213,9 +227,6 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
 
     window.addEventListener("resize", handleResize);
 
-    // Initial resize
-    setTimeout(handleResize, 100);
-
     // Notify parent about terminal readiness
     if (onTerminalReadyRef.current) {
       const sendData = (data: string) => {
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 5caf2ad..957804f 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2592,24 +2592,19 @@ a.nav-item,
   flex: 1;
   min-height: 0;
   padding: var(--space-2);
+  display: flex;
+  flex-direction: column;
 }
 
 .terminal-container .xterm {
-  height: 100%;
-  width: 100%;
+  flex: 1;
+  min-height: 0;
 }
 
 .terminal-container .xterm-viewport {
-  height: 100% !important;
-  width: 100% !important;
   background: #1e1e1e !important;
 }
 
-.terminal-container .xterm-screen {
-  height: 100% !important;
-  width: 100% !important;
-}
-
 .terminal-container canvas {
   display: block;
 }