From 4571bebf8ea052f164978db8e2c2c7c05bd3f464 Mon Sep 17 00:00:00 2001
From: Fusion <noreply@runfusion.ai>
Date: Sun, 24 May 2026 13:10:07 +0200
Subject: [PATCH] feat: add font size controls to mobile terminal header and
 fix auto-hide space reclamation

- TerminalComponent: expose changeFontSize via onTerminalReady callback
- MobileTerminalWrapper: pass changeFontSize to header
- MobileTerminalHeader: add A- and A+ font size buttons
- CSS: collapse header height/padding/margin/border when hidden to reclaim space
---
 .../src/components/mobile-terminal-header.tsx | 22 +++++++++++++++++++
 .../components/mobile-terminal-wrapper.tsx    |  6 +++--
 apps/web/src/components/terminal.tsx          | 13 ++++++++---
 apps/web/src/styles.css                       | 11 +++++++++-
 4 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/mobile-terminal-header.tsx b/apps/web/src/components/mobile-terminal-header.tsx
index fd71ef4..920de97 100644
--- a/apps/web/src/components/mobile-terminal-header.tsx
+++ b/apps/web/src/components/mobile-terminal-header.tsx
@@ -6,6 +6,7 @@ interface MobileTerminalHeaderProps {
   onBack?: () => void;
   onMenuToggle?: () => void;
   onClose?: () => void;
+  onFontSizeChange?: (delta: number) => void;
   isVisible: boolean;
   connectionStatus?: "connecting" | "connected" | "disconnected" | "error";
 }
@@ -15,6 +16,7 @@ export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
   onBack,
   onMenuToggle,
   onClose,
+  onFontSizeChange,
   isVisible,
   connectionStatus = "connecting",
 }) => {
@@ -56,6 +58,26 @@ export const MobileTerminalHeader: React.FC<MobileTerminalHeaderProps> = ({
       </div>
 
       <div className="mobile-terminal-header-right">
+        {onFontSizeChange && (
+          <>
+            <button
+              className="mobile-terminal-header-button"
+              onClick={() => onFontSizeChange(-1)}
+              type="button"
+              aria-label="Decrease font size"
+            >
+              <span style={{ fontSize: "0.75rem" }}>A-</span>
+            </button>
+            <button
+              className="mobile-terminal-header-button"
+              onClick={() => onFontSizeChange(1)}
+              type="button"
+              aria-label="Increase font size"
+            >
+              <span style={{ fontSize: "1rem" }}>A+</span>
+            </button>
+          </>
+        )}
         {onClose && (
           <button
             className="mobile-terminal-header-button"
diff --git a/apps/web/src/components/mobile-terminal-wrapper.tsx b/apps/web/src/components/mobile-terminal-wrapper.tsx
index 0e80f24..de7f1c4 100644
--- a/apps/web/src/components/mobile-terminal-wrapper.tsx
+++ b/apps/web/src/components/mobile-terminal-wrapper.tsx
@@ -32,6 +32,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
     sendData: (data: string) => void;
     connectionStatus: "connecting" | "connected" | "disconnected" | "error";
     focusInput: () => void;
+    changeFontSize: (delta: number) => void;
   } | null>(null);
 
   const headerAutoHide = useAutoHide({ timeout: 3000, enabled: isMobile });
@@ -41,8 +42,8 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
   }, [headerAutoHide]);
 
   const handleTerminalReady = useCallback(
-    (sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error", focusInput: () => void) => {
-      setTerminalRef({ sendData, connectionStatus, focusInput });
+    (sendData: (data: string) => void, connectionStatus: "connecting" | "connected" | "disconnected" | "error", focusInput: () => void, changeFontSize: (delta: number) => void) => {
+      setTerminalRef({ sendData, connectionStatus, focusInput, changeFontSize });
     },
     []
   );
@@ -71,6 +72,7 @@ export const MobileTerminalWrapper: React.FC<MobileTerminalWrapperProps> = ({
         onBack={onBack}
         onMenuToggle={onMenuToggle}
         onClose={onClose}
+        onFontSizeChange={(delta) => terminalRef?.changeFontSize(delta)}
         isVisible={headerAutoHide.isVisible}
         connectionStatus={terminalRef?.connectionStatus}
       />
diff --git a/apps/web/src/components/terminal.tsx b/apps/web/src/components/terminal.tsx
index 654f6fb..6c5ede1 100644
--- a/apps/web/src/components/terminal.tsx
+++ b/apps/web/src/components/terminal.tsx
@@ -15,7 +15,8 @@ interface TerminalProps {
   onTerminalReady?: (
     sendData: (data: string) => void,
     connectionStatus: "connecting" | "connected" | "disconnected" | "error",
-    focusInput: () => void
+    focusInput: () => void,
+    changeFontSize: (delta: number) => void
   ) => void;
 }
 
@@ -219,7 +220,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       const focusInput = () => {
         termRef.current?.focus();
       };
-      onTerminalReadyRef.current(sendData, status, focusInput);
+      const changeFontSize = (delta: number) => {
+        handleFontSizeChange(delta);
+      };
+      onTerminalReadyRef.current(sendData, status, focusInput, changeFontSize);
     }
 
     // Visibility API for reconnection
@@ -251,7 +255,10 @@ export const TerminalComponent: React.FC<TerminalProps> = ({
       const focusInput = () => {
         termRef.current?.focus();
       };
-      onTerminalReady(sendData, status, focusInput);
+      const changeFontSize = (delta: number) => {
+        handleFontSizeChange(delta);
+      };
+      onTerminalReady(sendData, status, focusInput, changeFontSize);
     }
   }, [status, onTerminalReady]);
 
diff --git a/apps/web/src/styles.css b/apps/web/src/styles.css
index d8c6a6d..934a325 100644
--- a/apps/web/src/styles.css
+++ b/apps/web/src/styles.css
@@ -2960,19 +2960,28 @@ a.nav-item,
   background: #2d2d2d;
   border-bottom: 1px solid #3e3e3e;
   flex-shrink: 0;
-  transition: transform 0.3s ease, opacity 0.3s ease;
+  transition: transform 0.3s ease, opacity 0.3s ease, height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
   z-index: 100;
+  overflow: hidden;
 }
 
 .mobile-terminal-header.hidden {
   transform: translateY(-100%);
   opacity: 0;
   pointer-events: none;
+  height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-width: 0;
+  flex-shrink: 1;
 }
 
 .mobile-terminal-header.visible {
   transform: translateY(0);
   opacity: 1;
+  height: auto;
 }
 
 .mobile-terminal-header-left,