fix(chat): scroll móvil + input no desaparece al teclear

- 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>
This commit is contained in:
Lizandro
2026-07-14 02:34:48 +00:00
co-authored by Claude Sonnet 4.6
parent 65c569b333
commit a3bd91c204
2 changed files with 13 additions and 10 deletions
+9 -6
View File
@@ -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();
}
@@ -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">