From cd9c9539a26d4c68d51f4face794efda6a2bcef9 Mon Sep 17 00:00:00 2001
From: Alex Blank <noreply@runfusion.ai>
Date: Tue, 26 May 2026 16:20:22 +0200
Subject: [PATCH] fix: improve terminal rendering by removing CSS overrides and
 increasing minimum font size

- Remove CSS overrides that interfere with xterm.js internal sizing
- Increase MIN_FONT_SIZE from 10 to 12 to prevent broken character rendering
- Increase default font sizes from 10/12 to 12/14 (desktop/mobile)
- Add clamping for stored font size values to prevent old tiny values
- Remove !important rules on xterm-viewport that could cause clipping
---
 apps/web/src/components/terminal.tsx | 12 ++++++++----
 apps/web/src/styles.css              | 26 ++++----------------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 5019995..a809379 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -21,8 +21,8 @@ interface TerminalProps {
 }
 
 const FONT_SIZE_KEY = "terminal-font-size";
-const MIN_FONT_SIZE = 6;
-const MAX_FONT_SIZE = 20;
+const MIN_FONT_SIZE = 12;
+const MAX_FONT_SIZE = 24;
 const RECONNECT_ATTEMPTS = 3;
 const RECONNECT_DELAY_BASE = 1000;
 
@@ -51,9 +51,13 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
   const activeModifierRef = useRef(activeModifier);
   activeModifierRef.current = activeModifier;
   const [fontSize, setFontSize] = useState(() => {
-    if (typeof window === "undefined") return isMobile ? 12 : 10;
+    if (typeof window === "undefined") return isMobile ? 14 : 12;
     const stored = localStorage.getItem(FONT_SIZE_KEY);
-    return stored ? parseInt(stored, 10) : isMobile ? 12 : 10;
+    if (stored) {
+      const parsed = parseInt(stored, 10);
+      return Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, parsed));
+    }
+    return isMobile ? 14 : 12;
   });
   const lastPingRef = useRef<number>(0);
   const heartbeatCheckRef = useRef<number | null>(null);
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 73a0ad4..37a2105 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2637,22 +2637,13 @@ a.nav-item,
   overflow: hidden;
 }
 
-.terminal-container .xterm {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
+/* xterm.js manages its own positioning and sizing */
 
 .terminal-container canvas {
   display: block;
 }
 
-/* Ensure xterm fills container */
-.terminal-container .xterm-viewport {
-  width: 100% !important;
-}
+/* xterm.js manages its own viewport dimensions - do not override */
 
 /* Mobile terminal container - no padding to maximize space */
 .terminal-wrapper.mobile .terminal-container {
@@ -3264,18 +3255,9 @@ a.nav-item,
   position: relative;
 }
 
-/* xterm fills container */
-.terminal-wrapper.mobile .terminal-container .xterm {
-  width: 100%;
-  height: 100%;
-}
+/* xterm.js manages its own sizing */
 
-/* Enable scrolling in mobile terminal */
-.terminal-wrapper.mobile .terminal-container .xterm-viewport {
-  overflow-y: auto !important;
-  -webkit-overflow-scrolling: touch !important;
-  height: 100% !important;
-}
+/* xterm.js manages its own scrolling and viewport dimensions */
 
 /* Special Keys Strip */
 .special-keys-strip {