Fix web terminal sizing: make xterm.js terminal use full available area

- Update .terminal-container CSS to use calc(100vh - 200px) for responsive height
- Remove fixed padding and height constraints
- Add xterm-addon-fit for proper terminal resizing
- Update terminal initialization to use fit addon for dynamic sizing
- Ensure terminal fills entire container width and height
- Add window resize event handler for responsive terminal sizing

templates/base.html

@@ -8,6 +8,7 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.3.0/css/xterm.css">
+    <script src="https://cdn.jsdelivr.net/npm/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
     <style>
         .navbar-brand {
             font-weight: bold;
@@ -23,10 +24,11 @@
             background-color: #1e1e1e;
             color: #f8f8f2;
             font-family: 'Courier New', monospace;
-            padding: 20px;
             border-radius: 8px;
-            height: 600px;
-            overflow-y: auto;
+            height: calc(100vh - 200px);
+            min-height: 400px;
+            overflow: hidden;
+            position: relative;
         }
         .terminal-input {
             background: transparent;

templates/terminal.html

@@ -20,8 +20,8 @@
                     </button>
                 </div>
             </div>
-            <div class="card-body p-0">
-                <div id="terminal" class="terminal-container"></div>
+            <div class="card-body p-2">
+                <div id="terminal" class="terminal-container w-100"></div>
             </div>
         </div>
     </div>
@@ -65,6 +65,22 @@ function connect() {
             convertEol: true
         });
         term.open(document.getElementById('terminal'));
+
+        // Load fit addon
+        const fitAddon = new FitAddon.FitAddon();
+        term.loadAddon(fitAddon);
+
+        // Fit terminal to container
+        function fitTerminal() {
+            fitAddon.fit();
+        }
+
+        // Initial fit after a short delay to ensure DOM is ready
+        setTimeout(fitTerminal, 100);
+
+        // Fit on window resize
+        window.addEventListener('resize', fitTerminal);
+
         term.focus();
     }