From acda983e0280997654d49fe17afa5297ec6d031a Mon Sep 17 00:00:00 2001
From: Qihan <3045019481@qq.com>
Date: Wed, 25 Mar 2026 05:37:48 +0800
Subject: [PATCH] fix(web): restore mobile scrolling outside Telegram (#358)

---
 .../components/AssistantChat/HappyThread.tsx  |  2 +-
 web/src/index.css                             | 19 ++++++++++++++++++-
 web/src/main.tsx                              |  1 +
 web/src/router.tsx                            |  4 ++--
 web/src/routes/sessions/file.tsx              |  2 +-
 web/src/routes/sessions/files.tsx             |  2 +-
 web/src/routes/settings/index.tsx             |  2 +-
 7 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index c2957840..48e9a57b 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -279,7 +279,7 @@ export function HappyThread(props: {
         }}>
             <ThreadPrimitive.Root className="flex min-h-0 flex-1 flex-col relative">
                 <ThreadPrimitive.Viewport asChild autoScroll={autoScrollEnabled}>
-                    <div ref={viewportRef} className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
+                    <div ref={viewportRef} className="app-scroll-y min-h-0 flex-1 overflow-x-hidden">
                         <div className="mx-auto w-full max-w-content min-w-0 p-3">
                             <div ref={topSentinelRef} className="h-px w-full" aria-hidden="true" />
                             {showSkeleton ? (
diff --git a/web/src/index.css b/web/src/index.css
index cfe1df16..41bc4487 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -98,12 +98,22 @@ body {
     height: 100vh;
     height: 100dvh;
     height: var(--tg-viewport-stable-height, 100dvh);
-    overflow: hidden;
     touch-action: pan-x pan-y;
     overscroll-behavior: none;
     -webkit-text-size-adjust: 100%;
 }
 
+html[data-telegram-app="true"],
+html[data-telegram-app="true"] body {
+    overflow: hidden;
+}
+
+html:not([data-telegram-app="true"]),
+html:not([data-telegram-app="true"]) body {
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
 body {
     font-size: 1rem;
     background: var(--app-bg);
@@ -114,6 +124,13 @@ body {
     height: 100%;
 }
 
+.app-scroll-y {
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    -webkit-overflow-scrolling: touch;
+    touch-action: pan-y;
+}
+
 @media (hover: hover) and (pointer: fine) {
     .session-list-item:hover,
     .session-list-new-button:hover {
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 2efaad1a..31c1def6 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -38,6 +38,7 @@ async function bootstrap() {
 
     // Only load Telegram SDK in Telegram environment (with 3s timeout)
     const isTelegram = isTelegramEnvironment()
+    document.documentElement.dataset.telegramApp = isTelegram ? 'true' : 'false'
     if (isTelegram) {
         await loadTelegramSdk()
     }
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 7b7e9721..a2cfd9e9 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -142,7 +142,7 @@ function SessionsPage() {
                     </div>
                 </div>
 
-                <div className="flex-1 min-h-0 overflow-y-auto desktop-scrollbar-left">
+                <div className="app-scroll-y flex-1 min-h-0 desktop-scrollbar-left">
                     {error ? (
                         <div className="mx-auto w-full max-w-content px-3 py-2">
                             <div className="text-sm text-red-600">{error}</div>
@@ -366,7 +366,7 @@ function NewSessionPage() {
                 <div className="flex-1 font-semibold">{t('newSession.title')}</div>
             </div>
 
-            <div className="flex-1 min-h-0 overflow-y-auto">
+            <div className="app-scroll-y flex-1 min-h-0">
                 {machinesError ? (
                     <div className="p-3 text-sm text-red-600">
                         {machinesError}
diff --git a/web/src/routes/sessions/file.tsx b/web/src/routes/sessions/file.tsx
index dd3a96bb..45cd1727 100644
--- a/web/src/routes/sessions/file.tsx
+++ b/web/src/routes/sessions/file.tsx
@@ -249,7 +249,7 @@ export default function FilePage() {
                 </div>
             ) : null}
 
-            <div className="flex-1 overflow-y-auto">
+            <div className="app-scroll-y flex-1">
                 <div className="mx-auto w-full max-w-content p-4">
                     {diffErrorMessage ? (
                         <div className="mb-3 rounded-md bg-amber-500/10 p-2 text-xs text-[var(--app-hint)]">
diff --git a/web/src/routes/sessions/files.tsx b/web/src/routes/sessions/files.tsx
index 173eacc5..8435c4d4 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -390,7 +390,7 @@ export default function FilesPage() {
                 </div>
             ) : null}
 
-            <div className="flex-1 overflow-y-auto">
+            <div className="app-scroll-y flex-1">
                 <div className="mx-auto w-full max-w-content">
                     {showGitErrorBanner && activeTab === 'changes' ? (
                         <div className="border-b border-[var(--app-divider)] bg-amber-500/10 px-3 py-2 text-xs text-[var(--app-hint)]">
diff --git a/web/src/routes/settings/index.tsx b/web/src/routes/settings/index.tsx
index 8b1dae55..d7eb3de9 100644
--- a/web/src/routes/settings/index.tsx
+++ b/web/src/routes/settings/index.tsx
@@ -191,7 +191,7 @@ export default function SettingsPage() {
                 </div>
             </div>
 
-            <div className="flex-1 overflow-y-auto">
+            <div className="app-scroll-y flex-1">
                 <div className="mx-auto w-full max-w-content">
                     {/* Language section */}
                     <div className="border-b border-[var(--app-divider)]">