From e55352346b4d3d9de3f6553bdbb517d5e82946be Mon Sep 17 00:00:00 2001
From: MacRimi <ricoextincion@gmail.com>
Date: Mon, 24 Nov 2025 18:18:10 +0100
Subject: [PATCH] Update terminal-panel.tsx

---
 AppImage/components/terminal-panel.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/AppImage/components/terminal-panel.tsx b/AppImage/components/terminal-panel.tsx
index e50a98b..b6b0cd8 100644
--- a/AppImage/components/terminal-panel.tsx
+++ b/AppImage/components/terminal-panel.tsx
@@ -407,6 +407,13 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
     term.loadAddon(fitAddon)
 
     term.open(container)
+
+    const isMobileDevice = window.innerWidth < 768
+    if (isMobileDevice) {
+      // Establecer un ancho mínimo de 100 columnas para forzar scroll horizontal en móvil
+      container.style.minWidth = "800px"
+    }
+
     fitAddon.fit()
 
     const wsUrl = websocketUrl || getWebSocketUrl()
@@ -651,7 +658,7 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
       </div>
 
       <div
-        className={`overflow-hidden flex flex-col ${isMobile ? "flex-1 min-h-[60vh]" : ""}`}
+        className={`overflow-hidden flex flex-col ${isMobile ? "flex-1 h-[60vh]" : "overflow-hidden"} w-full max-w-full`}
         style={!isMobile ? { height: `${terminalHeight}px`, flexShrink: 0 } : undefined}
       >
         {isMobile ? (
@@ -679,11 +686,12 @@ export const TerminalPanel: React.FC<TerminalPanelProps> = ({ websocketUrl, onCl
                 key={terminal.id}
                 value={terminal.id}
                 forceMount
-                className={`flex-1 mt-0 ${activeTerminalId === terminal.id ? "block" : "hidden"}`}
+                className={`flex-1 h-full mt-0 ${activeTerminalId === terminal.id ? "block" : "hidden"}`}
               >
                 <div
                   ref={(el) => (containerRefs.current[terminal.id] = el)}
-                  className="w-full h-full bg-black overflow-x-auto overflow-y-hidden"
+                  className="w-full h-full flex-1 bg-black overflow-x-auto overflow-y-hidden scroll-smooth"
+                  style={{ minWidth: "800px" }}
                 />
               </TabsContent>
             ))}