fix: ensure terminal container fills viewport and redraws on resize

Issues fixed:
1. Terminal container now has explicit width: 100% and height: 100%
2. Added term.refresh() after fit() to force redraw when dimensions change
3. Changed shell-body from min-height to height for definite sizing
4. Added .xterm-viewport width: 100% to ensure proper filling

This ensures the terminal properly fills the viewport and redraws
content when the window is resized.

apps/web/src/components/terminal.tsx

@@ -217,8 +217,14 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     // Fit terminal and notify backend
     const fitTerminal = () => {
       if (!fitAddonRef.current || !termRef.current) return;
+      const oldCols = termRef.current.cols;
+      const oldRows = termRef.current.rows;
       fitAddonRef.current.fit();
       const { cols, rows } = termRef.current;
+      // Force refresh if dimensions changed
+      if (cols !== oldCols || rows !== oldRows) {
+        termRef.current.refresh(0, rows - 1);
+      }
       if (ws.readyState === WebSocket.OPEN) {
         ws.send(JSON.stringify({ type: "resize", cols, rows }));
       }

apps/web/src/styles.css

@@ -120,7 +120,7 @@ a {
 .shell-body {
   display: grid;
   grid-template-columns: 230px 1fr;
-  min-height: calc(100vh - 57px);
+  height: calc(100vh - 57px);
   flex: 1;
 }
 
@@ -2598,6 +2598,9 @@ a.nav-item,
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
+  width: 100%;
+  height: 100%;
 }
 
 .terminal-container .xterm {
@@ -2611,6 +2614,11 @@ a.nav-item,
   display: block;
 }
 
+/* Ensure xterm fills container */
+.terminal-container .xterm-viewport {
+  width: 100% !important;
+}
+
 /* Mobile terminal container - no padding to maximize space */
 .terminal-wrapper.mobile .terminal-container {
   padding: 0;