From 42fe69f5a069b0daffd1f2eec41fcef7833d36b6 Mon Sep 17 00:00:00 2001
From: juanatsap <juanatsap@gmail.com>
Date: Thu, 9 Apr 2026 23:19:23 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20mobile=20viewport=20overflow=20=E2=80=94?=
 =?UTF-8?q?=20no=20horizontal=20scroll=20on=20iPhone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace 100vw with 100% on mobile chat panel (avoids scrollbar width)
- Add overflow-x: hidden on html/body for mobile
- Add box-sizing: border-box on mobile panel
- Add overflow: hidden and max-width: 100% on chat rows
- Add overflow-x: hidden on messages container
---
 static/css/04-interactive/_chat.css | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/static/css/04-interactive/_chat.css b/static/css/04-interactive/_chat.css
index 4ab09ec..1ff0ff8 100644
--- a/static/css/04-interactive/_chat.css
+++ b/static/css/04-interactive/_chat.css
@@ -314,6 +314,7 @@
 .chat-messages {
     flex: 1;
     overflow-y: auto;
+    overflow-x: hidden;
     padding: 12px;
     display: flex;
     flex-direction: column;
@@ -327,6 +328,8 @@
     display: flex;
     gap: 8px;
     align-items: flex-start;
+    max-width: 100%;
+    overflow: hidden;
 }
 
 .chat-row-bot {
@@ -845,17 +848,23 @@
    ========================================================================== */
 
 @media (max-width: 480px) {
+    /* Prevent horizontal scroll when chat is open */
+    html, body {
+        overflow-x: hidden;
+    }
+
     /* Default compact: bottom sheet with clear separation */
     .chat-panel {
         bottom: 0;
         left: 0;
         right: 0;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100%;
+        max-width: 100%;
         max-height: 50vh;
         border-radius: 12px 12px 0 0;
         box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
         overflow: hidden;
+        box-sizing: border-box;
     }
 
     .chat-toggle-btn {
@@ -880,8 +889,8 @@
         left: 0;
         right: 0;
         top: auto;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100%;
+        max-width: 100%;
         height: 50vh;
         max-height: 50vh;
         border-radius: 12px 12px 0 0;
@@ -902,8 +911,8 @@
         left: 0;
         right: 0;
         top: auto;
-        width: 100vw;
-        max-width: 100vw;
+        width: 100%;
+        max-width: 100%;
         height: auto;
         max-height: 50vh;
         border-radius: 12px 12px 0 0;