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] 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;
   }
 }