From 811bbb9edd3eba9a04b4a9fc9d5c4689b47b49a3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 20 Mar 2026 20:15:15 +0000
Subject: [PATCH] Fix mobile chat page scrolling - prevent body scroll chaining

On mobile, the entire page would scroll when dragging in the chat area,
causing the bottom nav and input to move. Fixed by:
- Making .chat-page position:fixed on mobile to lock it to viewport
- Adding overscroll-behavior:contain on .chat-messages to prevent
  scroll events from bubbling to the body

https://claude.ai/code/session_01FQzfAs9Ye8H6tQGEkugFjN
---
 frontend/src/App.css | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index 018fa8f..e67f07f 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -882,6 +882,8 @@ h1, h2, h3, h4, h5, h6 {
   flex: 1;
   overflow-y: auto;
   padding: 16px;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* Chat empty state */
@@ -2355,8 +2357,14 @@ h1, h2, h3, h4, h5, h6 {
   }
 
   .chat-page {
+    position: fixed;
+    top: 53px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: auto;
     padding-bottom: 0;
-    height: calc(100dvh - 53px);
+    z-index: 1;
   }
 
   .chat-page .chat-input {