From 457f0d29aeb1e44418a80e2803814a7fadc0a3c3 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 13:15:29 +0200
Subject: [PATCH 1/5] fix: add safety guards to font size change and show
 buttons on all screen sizes

- Add null checks and try/catch around fitAddon.fit() to prevent viewport errors
- Use requestAnimationFrame to ensure DOM is stable before fitting
- Remove isMobile condition from font size buttons in TerminalComponent
- Font size controls now visible on both mobile and desktop terminals
---
 apps/web/src/components/terminal.tsx | 48 +++++++++++++++-------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 6c5ede1..fc267d0 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -266,9 +266,17 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
     const newSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, fontSize + delta));
     setFontSize(newSize);
     localStorage.setItem(FONT_SIZE_KEY, newSize.toString());
-    if (termRef.current) {
+    if (termRef.current && fitAddonRef.current) {
       termRef.current.options.fontSize = newSize;
-      fitAddonRef.current?.fit();
+      requestAnimationFrame(() => {
+        if (termRef.current && fitAddonRef.current) {
+          try {
+            fitAddonRef.current.fit();
+          } catch {
+            // Ignore fit errors during re-initialization
+          }
+        }
+      });
     }
   };
 
@@ -345,26 +353,22 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
           )}
         </div>
         <div className="terminal-header-right">
-          {isMobile && (
-            <>
-              <button
-                className="terminal-header-button"
-                onClick={() => handleFontSizeChange(-1)}
-                type="button"
-                aria-label="Decrease font size"
-              >
-                A-
-              </button>
-              <button
-                className="terminal-header-button"
-                onClick={() => handleFontSizeChange(1)}
-                type="button"
-                aria-label="Increase font size"
-              >
-                A+
-              </button>
-            </>
-          )}
+          <button
+            className="terminal-header-button"
+            onClick={() => handleFontSizeChange(-1)}
+            type="button"
+            aria-label="Decrease font size"
+          >
+            A-
+          </button>
+          <button
+            className="terminal-header-button"
+            onClick={() => handleFontSizeChange(1)}
+            type="button"
+            aria-label="Increase font size"
+          >
+            A+
+          </button>
           {onClose && (
             <button className="terminal-close" onClick={onClose} type="button">
               Close

From 9afd559394ae1cec6a8f0d93ae8e7b3131a39ad4 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 13:20:49 +0200
Subject: [PATCH 2/5] fix: reduce minimum font size and prevent reconnection on
 font size change

- Reduce MIN_FONT_SIZE from 16 to 10 for better range
- Remove calculateFontSize from useEffect dependencies to prevent
  terminal re-initialization when font size changes
- Font size changes now update xterm options directly without
  disposing/recreating the terminal (no WebSocket reconnection)
---
 apps/web/src/components/terminal.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index fc267d0..8c3b236 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -21,7 +21,7 @@ interface TerminalProps {
 }
 
 const FONT_SIZE_KEY = "terminal-font-size";
-const MIN_FONT_SIZE = 16;
+const MIN_FONT_SIZE = 10;
 const MAX_FONT_SIZE = 24;
 const RECONNECT_ATTEMPTS = 3;
 const RECONNECT_DELAY_BASE = 1000;
@@ -242,7 +242,8 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       ws.close();
       term.dispose();
     };
-  }, [instanceId, connectWebSocket, calculateFontSize]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instanceId, connectWebSocket]);
 
   // Update parent about status changes
   useEffect(() => {

From 6173d42ddff95bbee2b6781709e41730c146ca85 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 13:24:21 +0200
Subject: [PATCH 3/5] fix: allow terminal page to fill available space instead
 of using 100vh

- Change .terminal-page height from 100vh to 100% to fit within shell layout
- Add display: flex and min-height: 0 to .shell-content to allow flex children to expand
- Terminal container now properly fills available vertical space
---
 apps/web/src/styles.css | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 934a325..f13015c 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -166,6 +166,9 @@ a {
 .shell-content {
   padding: 1.25rem;
   overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .eyebrow {
@@ -2482,7 +2485,8 @@ a.nav-item,
 .terminal-page {
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100%;
+  min-height: 0;
   padding: var(--space-4);
   gap: var(--space-4);
 }

From 2f4430608946f3927538647923780f55971fe0e7 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 13:31:46 +0200
Subject: [PATCH 4/5] fix: ensure terminal fills entire viewport on mobile

- Add width: 100% to xterm, xterm-viewport, and xterm-screen
- Add explicit canvas display: block for proper sizing
- Remove padding from terminal-container on mobile
- Add min-height: 100% to terminal-wrapper.mobile
- Ensure xterm.js internal elements fill parent container
---
 apps/web/src/styles.css | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index f13015c..f99fc42 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2596,12 +2596,24 @@ a.nav-item,
 
 .terminal-container .xterm {
   height: 100%;
+  width: 100%;
 }
 
 .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;
+}
+
 /* Responsive terminal */
 @media (max-width: 767px) {
   .terminal-page {
@@ -3187,6 +3199,7 @@ a.nav-item,
   border: none;
   border-radius: 0;
   height: 100%;
+  min-height: 100%;
 }
 
 .terminal-wrapper.mobile .terminal-header {
@@ -3256,6 +3269,7 @@ a.nav-item,
 
   .terminal-container {
     touch-action: none;
+    padding: 0;
   }
 }
 

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

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 8c3b236..63a5de5 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/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;
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index f99fc42..5caf2ad 100644
--- a/apps/web/src/styles.css
+++ b/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 {