From 89a10cf3f7f6b8b1a9a68c0e228f4cdc0b20b3f9 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Thu, 5 Feb 2026 01:42:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20sidebar=20scroll=20on=20m?=
 =?UTF-8?q?obile=20dynamic=20viewport?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use dynamic viewport height to prevent sidebar scroll lock in mobile browsers
Harden sidebar scroll container with min-height and momentum scrolling
---
 web/src/components/layout/PageLayout.jsx |  4 ++--
 web/src/index.css                        | 15 ++++++++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/src/components/layout/PageLayout.jsx b/web/src/components/layout/PageLayout.jsx
index 6474501dd..49c47e690 100644
--- a/web/src/components/layout/PageLayout.jsx
+++ b/web/src/components/layout/PageLayout.jsx
@@ -121,8 +121,8 @@ const PageLayout = () => {
 
   return (
     <Layout
+      className='app-layout'
       style={{
-        height: '100vh',
         display: 'flex',
         flexDirection: 'column',
         overflow: isMobile ? 'visible' : 'hidden',
@@ -153,6 +153,7 @@ const PageLayout = () => {
       >
         {showSider && (
           <Sider
+            className='app-sider'
             style={{
               position: 'fixed',
               left: 0,
@@ -160,7 +161,6 @@ const PageLayout = () => {
               zIndex: 99,
               border: 'none',
               paddingRight: '0',
-              height: 'calc(100vh - 64px)',
               width: 'var(--sidebar-current-width)',
             }}
           >
diff --git a/web/src/index.css b/web/src/index.css
index 229095068..265f0b866 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -31,6 +31,16 @@ body {
   background-color: var(--semi-color-bg-0);
 }
 
+.app-layout {
+  height: 100vh;
+  height: 100dvh;
+}
+
+.app-sider {
+  height: calc(100vh - 64px);
+  height: calc(100dvh - 64px);
+}
+
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
@@ -107,6 +117,7 @@ code {
   height: 100%;
   display: flex;
   flex-direction: column;
+  min-height: 0;
   transition: width 0.3s ease;
   background: var(--semi-color-bg-0);
 }
@@ -116,9 +127,11 @@ code {
   width: 100%;
   background: var(--semi-color-bg-0);
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   border-right: none;
   overflow-y: auto;
+  min-height: 0;
+  -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
 }