From e7a89a853f95f5c285bb9e97af79ee0336a99963 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 17:12:32 +0200
Subject: [PATCH] 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 |  6 ++++++
 apps/web/src/styles.css              | 10 +++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index d398064..2defa46 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/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 }));
       }
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 2ffc7b2..aa7c0d2 100644
--- a/apps/web/src/styles.css
+++ b/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;