From 97e1bdb72b012abdc918484b32a66dac36b51693 Mon Sep 17 00:00:00 2001
From: Lizandro <lizandrogd@gmail.com>
Date: Sun, 19 Jul 2026 22:22:30 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20chat=20m=C3=B3vil=20usa=20position:fixed?=
 =?UTF-8?q?=20inset:0=20en=20lugar=20de=20height:100dvh?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

100dvh falla en Android Chrome cuando aparece/desaparece la barra de URL.
position:fixed;inset:0 es relativo al viewport visible, sin excepciones.
Desktop mantiene card centrada con position:relative.
Se elimina el hack de visualViewport ya que no es necesario con fixed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 resources/views/chat-publico.blade.php | 57 ++++++++------------------
 1 file changed, 17 insertions(+), 40 deletions(-)

diff --git a/resources/views/chat-publico.blade.php b/resources/views/chat-publico.blade.php
index b5127ff..d1efcd2 100755
--- a/resources/views/chat-publico.blade.php
+++ b/resources/views/chat-publico.blade.php
@@ -21,47 +21,41 @@
             overscroll-behavior: none;
         }
 
-        /* Móvil: pantalla completa */
+        /* Móvil: body como lienzo neutro */
         body {
             background: #111b21;
-            height: 100vh;
-            height: 100dvh;
-            height: -webkit-fill-available;
             overflow: hidden;
         }
 
-        /* Desktop: fondo con gradiente + chat centrado como frame */
-        @media (min-width: 640px) {
-            body {
-                background: #0d1117;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                overflow: hidden;
-            }
-        }
-
-        /* El contenedor del chat */
+        /* #chat-root ocupa todo el viewport visible con position:fixed
+           — esto es la única forma 100% fiable en Android Chrome
+           (100dvh falla cuando la barra de URL aparece/desaparece) */
         #chat-root {
-            width: 100%;
-            height: 100vh;
-            height: 100dvh;
-            height: -webkit-fill-available;
+            position: fixed;
+            inset: 0;
             display: flex;
             flex-direction: column;
             background: #111b21;
             overflow: hidden;
         }
 
+        /* Desktop: card centrada */
         @media (min-width: 640px) {
+            body {
+                background: #0d1117;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100vh;
+            }
             #chat-root {
+                position: relative;
+                inset: auto;
                 width: 420px;
-                height: 90vh;
                 height: 90dvh;
                 max-height: 820px;
                 border-radius: 20px;
                 box-shadow: 0 24px 64px rgba(0,0,0,.6);
-                overflow: hidden;
             }
         }
 
@@ -110,7 +104,6 @@
         var newMsgCount = 0;
         var lastCount   = 0;
         var observer    = null;
-        var vpInited    = false;
 
         function checkBottom() {
             if (!msgsEl) return true;
@@ -175,32 +168,16 @@
             scrollBottom();
         }
 
-        /* Ajustar altura al teclado virtual (una sola vez) */
-        function initViewport() {
-            if (vpInited || !window.visualViewport) return;
-            vpInited = true;
-            var root = document.getElementById('chat-root');
-            if (!root) return;
-            function update() {
-                if (window.innerWidth < 640) {
-                    root.style.height = window.visualViewport.height + 'px';
-                }
-            }
-            window.visualViewport.addEventListener('resize', update);
-            update();
-        }
-
         /* Bajar al fondo cuando el componente emite scroll-chat */
         window.addEventListener('scroll-chat', function () {
             isAtBottom = true; newMsgCount = 0; updateBadge(); scrollBottom();
         });
 
-        document.addEventListener('DOMContentLoaded', function () { init(); initViewport(); });
+        document.addEventListener('DOMContentLoaded', function () { init(); });
 
         /* livewire:load: Livewire terminó de arrancar — re-init por si el DOM cambió */
         document.addEventListener('livewire:load', function () {
             init();
-            initViewport();
             /* Usar hook oficial para scroll después de cada update */
             Livewire.hook('message.processed', function () {
                 if (isAtBottom) scrollBottom();