up

2026-04-30 21:40:55 -05:00
parent f61e8005fc
commit 011bf0fbca
2 changed files with 179 additions and 56 deletions
@@ -2,18 +2,105 @@
 <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 <head>
    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {{-- viewport-fit=cover expone las safe areas del notch/Dynamic Island --}}
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="csrf-token" content="{{ csrf_token() }}">
+    <meta name="color-scheme" content="dark">
+    {{-- Apple PWA / standalone --}}
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Chat">
    <title>Chat en vivo | {{ config('app.name') }}</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        /* ── Reset iOS/Safari ───────────────────────────────── */
+        *, *::before, *::after { box-sizing: border-box; }
+
+        html {
+            /* Altura real del viewport incluyendo safe areas */
+            height: -webkit-fill-available;
+        }
+
+        body {
+            font-family: 'Inter', sans-serif;
+            background: #111b21;
+            /* Evita el scroll del body — solo scrollea el área de mensajes */
+            overflow: hidden;
+            overscroll-behavior: none;
+            /* Altura: dvh con fallback para Safari < 15.4 */
+            height: 100vh;
+            height: 100dvh;
+            height: -webkit-fill-available;
+            /* Elimina el tap highlight azul en iOS */
+            -webkit-tap-highlight-color: transparent;
+        }
+
+        /* Evita el zoom Safari en inputs < 16px */
+        input, textarea, select {
+            font-size: 16px !important;
+        }
+
+        /* Scroll suave tipo nativo en iOS */
+        .ios-scroll {
+            -webkit-overflow-scrolling: touch;
+            overscroll-behavior-y: contain;
+        }
+
+        /* Deshabilitar appearance por defecto en iOS */
+        input[type="tel"],
+        input[type="text"],
+        textarea {
+            -webkit-appearance: none;
+            appearance: none;
+            border-radius: 12px;
+        }
+
+        button {
+            -webkit-appearance: none;
+            touch-action: manipulation;
+            cursor: pointer;
+        }
+
+        /* Safe area — rellena el notch arriba y el home indicator abajo */
+        .safe-top    { padding-top:    env(safe-area-inset-top,    0px); }
+        .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
+        .safe-left   { padding-left:   env(safe-area-inset-left,   0px); }
+        .safe-right  { padding-right:  env(safe-area-inset-right,  0px); }
+    </style>
    @livewireStyles
 </head>
-<body class="bg-[#111b21] min-h-screen flex items-center justify-center" style="font-family:'Inter',sans-serif;">
+<body>

    <livewire:chat.public-chat />

    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    @livewireScripts
+
+    <script>
+        /**
+         * visualViewport API: cuando el teclado iOS aparece, el viewport se reduce.
+         * Ajustamos la altura del chat dinámicamente para que el input quede visible.
+         */
+        function initViewportFix() {
+            const root = document.getElementById('chat-root');
+            if (!root || !window.visualViewport) return;
+
+            const update = () => {
+                const h = window.visualViewport.height;
+                root.style.height = h + 'px';
+                // Scroll al último mensaje al aparecer teclado
+                const msgs = document.getElementById('pub-messages');
+                if (msgs) setTimeout(() => { msgs.scrollTop = msgs.scrollHeight; }, 50);
+            };
+
+            window.visualViewport.addEventListener('resize', update);
+            window.visualViewport.addEventListener('scroll', update);
+            update();
+        }
+
+        document.addEventListener('DOMContentLoaded', initViewportFix);
+        document.addEventListener('livewire:load',    initViewportFix);
+    </script>
 </body>
 </html>