From 058c501e4a30d12e9d6b5507dfa8ba5ea78acb7e Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 16:37:18 +0200
Subject: [PATCH] fix: prevent terminal from growing beyond viewport on resize

Added max-height constraints at multiple levels:
- .mobile-terminal-wrapper: max-height 100vh/100dvh
- .mobile-terminal-content: max-height 100%, min-height 0
- .terminal-container: max-height 100%
- .xterm: max-height 100%
- .xterm-viewport: max-height 100% + overflow-y auto

This prevents xterm.js from expanding the container when fit() adds rows,
which was causing an infinite growth loop on window resize.
---
 apps/web/src/styles.css | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index 1f1f9b5..833726c 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -3071,6 +3071,8 @@ a.nav-item,
     "keys";
   height: 100vh;
   height: 100dvh; /* Dynamic viewport height for mobile */
+  max-height: 100vh;
+  max-height: 100dvh;
   background: #1e1e1e;
   position: relative;
   overflow: hidden;
@@ -3183,6 +3185,8 @@ a.nav-item,
   overflow: hidden;
   position: relative;
   background: #1e1e1e;
+  min-height: 0;
+  max-height: 100%;
 }
 
 /* Terminal wrapper - fills content area */
@@ -3202,6 +3206,7 @@ a.nav-item,
 .terminal-wrapper.mobile .terminal-container {
   width: 100%;
   height: 100%;
+  max-height: 100%;
   padding: 0;
   overflow: hidden;
   position: relative;
@@ -3211,6 +3216,7 @@ a.nav-item,
 .terminal-wrapper.mobile .terminal-container .xterm {
   width: 100%;
   height: 100%;
+  max-height: 100%;
   display: flex;
   flex-direction: column;
 }
@@ -3219,6 +3225,8 @@ a.nav-item,
   flex: 1;
   width: 100% !important;
   height: 100% !important;
+  max-height: 100% !important;
+  overflow-y: auto !important;
 }
 
 /* Special Keys Strip */