From a3bd91c20482169057b4088527c5059321b52614 Mon Sep 17 00:00:00 2001
From: Lizandro <lizandrogd@gmail.com>
Date: Tue, 14 Jul 2026 02:34:48 +0000
Subject: [PATCH] =?UTF-8?q?fix(chat):=20scroll=20m=C3=B3vil=20+=20input=20?=
 =?UTF-8?q?no=20desaparece=20al=20teclear?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Wrapper del chat: flex-1 + min-h-0 (en vez de h-full) para scroll correcto
- Área de mensajes: min-h-0 explícito — crítico para que flex-1 haga scroll en iOS/Android
- Input: flex-shrink:0 inline para reforzar que nunca se comprima
- visualViewport: usa requestAnimationFrame para scroll más suave, elimina listener scroll

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/chat-publico.blade.php            | 15 +++++++++------
 .../views/livewire/chat/public-chat.blade.php     |  8 ++++----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/resources/views/chat-publico.blade.php b/resources/views/chat-publico.blade.php
index 542554b..9f5273e 100644
--- a/resources/views/chat-publico.blade.php
+++ b/resources/views/chat-publico.blade.php
@@ -109,17 +109,20 @@
             const root = document.getElementById('chat-root');
             if (!root || !window.visualViewport) return;
 
-            const isMobile = window.innerWidth < 640;
-            if (!isMobile) return; // En desktop no necesitamos ajustar
-
             const update = () => {
-                root.style.height = window.visualViewport.height + 'px';
+                const vh = window.visualViewport.height;
+                // En móvil: ajustamos #chat-root a la altura visual real
+                if (window.innerWidth < 640) {
+                    root.style.height = vh + 'px';
+                }
+                // Scroll al fondo siempre que cambie el viewport
                 const msgs = document.getElementById('pub-messages');
-                if (msgs) setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
+                if (msgs) {
+                    requestAnimationFrame(() => { msgs.scrollTop = msgs.scrollHeight; });
+                }
             };
 
             window.visualViewport.addEventListener('resize', update);
-            window.visualViewport.addEventListener('scroll', update);
             update();
         }
 
diff --git a/resources/views/livewire/chat/public-chat.blade.php b/resources/views/livewire/chat/public-chat.blade.php
index b681c4a..e327a65 100644
--- a/resources/views/livewire/chat/public-chat.blade.php
+++ b/resources/views/livewire/chat/public-chat.blade.php
@@ -154,7 +154,7 @@
 
     {{-- ══ PASO 3: Interfaz de chat ══ --}}
     @else
-        <div class="flex flex-col h-full bg-[#0b141a]"
+        <div class="flex-1 flex flex-col min-h-0 bg-[#0b141a]"
              x-data="{ uploading: false }"
              x-on:scroll-chat.window="$nextTick(() => {
                  const el = document.getElementById('pub-messages');
@@ -197,10 +197,10 @@
             </div>
 
             {{-- Mensajes --}}
-            <div class="flex-1 overflow-y-auto px-3 py-4 space-y-3 ios-scroll"
+            <div class="flex-1 min-h-0 overflow-y-auto px-3 py-4 space-y-3 ios-scroll"
                  id="pub-messages"
                  wire:poll.3000ms="cargarMensajes"
-                 style="overscroll-behavior-y: contain;">
+                 style="overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;">
 
                 @forelse($mensajes as $msg)
 
@@ -452,7 +452,7 @@
 
             {{-- Input + upload --}}
             @if ($estadoConv !== 'cerrada')
-                <div class="bg-[#202c33] flex-shrink-0 safe-bottom safe-left safe-right">
+                <div class="bg-[#202c33] flex-shrink-0 safe-bottom safe-left safe-right" style="flex-shrink:0;">
                     {{-- Indicador de procesando imagen --}}
                     @if ($procesandoImagen)
                         <div class="px-4 pt-2 pb-1">