Update script-terminal-modal.tsx

AppImage/components/script-terminal-modal.tsx

@@ -68,6 +68,9 @@ export function ScriptTerminalModal({
   const [isResizing, setIsResizing] = useState(false)
   const resizeBarRef = useRef<HTMLDivElement>(null)
 
+  // Debug visual para tablets
+  const [debugInfo, setDebugInfo] = useState<string[]>([])
+
   const terminalContainerRef = useRef<HTMLDivElement>(null)
 
   const sendKey = useCallback((key: string) => {
@@ -388,6 +391,10 @@ export function ScriptTerminalModal({
     e.preventDefault()
     e.stopPropagation()
 
+    const debugMsg = `[${new Date().toLocaleTimeString()}] Resize start - Type: ${e.type}, isMobile: ${isMobile}, isTablet: ${isTablet}`
+    console.log(debugMsg)
+    setDebugInfo(prev => [...prev.slice(-4), debugMsg])
+    
     setIsResizing(true)
     
     // Detectar si es touch o mouse
@@ -395,11 +402,27 @@ export function ScriptTerminalModal({
     const startY = clientY
     const startHeight = modalHeight
 
+    const debugMsg2 = `Start Y: ${startY}, Start height: ${startHeight}`
+    console.log(debugMsg2)
+    setDebugInfo(prev => [...prev.slice(-4), debugMsg2])
+
+    let lastY = startY
+    let moveCount = 0
+
     const handleMove = (moveEvent: MouseEvent | TouchEvent) => {
+      moveEvent.preventDefault()
+      moveEvent.stopPropagation()
+      
       const currentY = "touches" in moveEvent ? moveEvent.touches[0].clientY : moveEvent.clientY
       const deltaY = currentY - startY
       const newHeight = Math.max(300, Math.min(window.innerHeight - 100, startHeight + deltaY))
 
+      moveCount++
+      if (moveCount % 5 === 0) {
+        console.log(`Move #${moveCount} - currentY: ${currentY}, deltaY: ${deltaY}, newHeight: ${newHeight}`)
+      }
+
+      lastY = currentY
       setModalHeight(newHeight)
 
       if (fitAddonRef.current && termRef.current && wsRef.current?.readyState === WebSocket.OPEN) {
@@ -419,20 +442,26 @@ export function ScriptTerminalModal({
     }
 
     const handleEnd = () => {
+      const debugMsg3 = `Resize end - Final height: ${modalHeight}, Total moves: ${moveCount}, Last Y: ${lastY}`
+      console.log(debugMsg3)
+      setDebugInfo(prev => [...prev.slice(-4), debugMsg3])
+      
       setIsResizing(false)
       
-      document.removeEventListener("mousemove", handleMove as any)
+      document.removeEventListener("mousemove", handleMove as any, false)
-      document.removeEventListener("mouseup", handleEnd)
+      document.removeEventListener("mouseup", handleEnd, false)
-      document.removeEventListener("touchmove", handleMove as any)
+      document.removeEventListener("touchmove", handleMove as any, false)
-      document.removeEventListener("touchend", handleEnd)
+      document.removeEventListener("touchend", handleEnd, false)
+      document.removeEventListener("touchcancel", handleEnd, false)
 
       localStorage.setItem("scriptModalHeight", modalHeight.toString())
     }
 
-    document.addEventListener("mousemove", handleMove as any)
+    document.addEventListener("mousemove", handleMove as any, false)
-    document.addEventListener("mouseup", handleEnd)
+    document.addEventListener("mouseup", handleEnd, false)
-    document.addEventListener("touchmove", handleMove as any, { passive: false })
+    document.addEventListener("touchmove", handleMove as any, { passive: false, capture: false })
-    document.addEventListener("touchend", handleEnd)
+    document.addEventListener("touchend", handleEnd, false)
+    document.addEventListener("touchcancel", handleEnd, false)
   }
 
   const sendCommand = (command: string) => {
@@ -463,6 +492,15 @@ export function ScriptTerminalModal({
             </div>
           </div>
 
+          {/* Debug panel - solo visible en tablets */}
+          {isTablet && debugInfo.length > 0 && (
+            <div className="bg-yellow-900/50 border-b border-yellow-700 p-2 text-xs font-mono text-yellow-200 max-h-20 overflow-y-auto">
+              {debugInfo.map((info, i) => (
+                <div key={i}>{info}</div>
+              ))}
+            </div>
+          )}
+
           <div className="overflow-hidden relative flex-1">
             <div ref={terminalContainerRef} className="w-full h-full" />