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:
co-authored by
Claude Sonnet 4.6
parent
65c569b333
commit
a3bd91c204
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user