fix(web): restore mobile scrolling outside Telegram (#358)

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 ? (

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 {

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()
     }

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}

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)]">

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)]">

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)]">