From 2b133feec5d3916e247b977b9d2dc628d6b86888 Mon Sep 17 00:00:00 2001
From: Qihan <3045019481@qq.com>
Date: Thu, 26 Mar 2026 08:04:58 +0800
Subject: [PATCH] fix(web): keep mobile views scrollable and new-session
 actions reachable (#364)

---
 web/src/App.tsx                                |  2 +-
 web/src/components/InstallPrompt.tsx           | 18 +++++++++++++++++-
 .../components/NewSession/ActionButtons.tsx    |  2 +-
 .../components/NewSession/AgentSelector.tsx    |  2 +-
 web/src/components/SessionChat.tsx             |  2 +-
 web/src/router.tsx                             |  5 ++++-
 web/src/routes/sessions/file.tsx               |  4 ++--
 web/src/routes/sessions/files.tsx              |  4 ++--
 web/src/routes/sessions/terminal.tsx           |  4 ++--
 web/src/routes/settings/index.tsx              |  4 ++--
 10 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/web/src/App.tsx b/web/src/App.tsx
index ca3d2921..daf6531d 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -347,7 +347,7 @@ function AppInner() {
                 />
                 <VoiceErrorBanner />
                 <OfflineBanner />
-                <div className="h-full flex flex-col">
+                <div className="h-full min-h-0 flex flex-col">
                     <Outlet />
                 </div>
                 <ToastContainer />
diff --git a/web/src/components/InstallPrompt.tsx b/web/src/components/InstallPrompt.tsx
index d790a60a..fe4af0da 100644
--- a/web/src/components/InstallPrompt.tsx
+++ b/web/src/components/InstallPrompt.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { usePWAInstall } from '@/hooks/usePWAInstall'
 import { usePlatform } from '@/hooks/usePlatform'
 import { CloseIcon, ShareIcon, PlusCircleIcon } from '@/components/icons'
@@ -9,6 +9,22 @@ export function InstallPrompt() {
     const { canInstall, canInstallIOS, promptInstall, dismissInstall, isStandalone } = usePWAInstall()
     const { isTelegram, haptic } = usePlatform()
     const [showIOSGuide, setShowIOSGuide] = useState(false)
+    const showFloatingPrompt = !isTelegram && !isStandalone && ((canInstallIOS && !showIOSGuide) || canInstall)
+
+    useEffect(() => {
+        const root = document.documentElement
+        if (!root) return
+
+        if (showFloatingPrompt) {
+            root.style.setProperty('--app-floating-bottom-offset', '112px')
+        } else {
+            root.style.removeProperty('--app-floating-bottom-offset')
+        }
+
+        return () => {
+            root.style.removeProperty('--app-floating-bottom-offset')
+        }
+    }, [showFloatingPrompt])
 
     if (isTelegram || isStandalone) {
         return null
diff --git a/web/src/components/NewSession/ActionButtons.tsx b/web/src/components/NewSession/ActionButtons.tsx
index 37f6ef07..00b6b9f8 100644
--- a/web/src/components/NewSession/ActionButtons.tsx
+++ b/web/src/components/NewSession/ActionButtons.tsx
@@ -13,7 +13,7 @@ export function ActionButtons(props: {
     const { t } = useTranslation()
 
     return (
-        <div className="flex gap-2 px-3 py-3">
+        <div className="flex gap-2 px-3 pt-3 pb-[calc(env(safe-area-inset-bottom)+1rem)]">
             <Button
                 variant="secondary"
                 onClick={props.onCancel}
diff --git a/web/src/components/NewSession/AgentSelector.tsx b/web/src/components/NewSession/AgentSelector.tsx
index 80521afc..73e87d46 100644
--- a/web/src/components/NewSession/AgentSelector.tsx
+++ b/web/src/components/NewSession/AgentSelector.tsx
@@ -13,7 +13,7 @@ export function AgentSelector(props: {
             <label className="text-xs font-medium text-[var(--app-hint)]">
                 {t('newSession.agent')}
             </label>
-            <div className="flex gap-3">
+            <div className="flex flex-wrap gap-x-3 gap-y-2">
                 {(['claude', 'codex', 'cursor', 'gemini', 'opencode'] as const).map((agentType) => (
                     <label
                         key={agentType}
diff --git a/web/src/components/SessionChat.tsx b/web/src/components/SessionChat.tsx
index ee898e48..84128624 100644
--- a/web/src/components/SessionChat.tsx
+++ b/web/src/components/SessionChat.tsx
@@ -323,7 +323,7 @@ export function SessionChat(props: {
     })
 
     return (
-        <div className="flex h-full flex-col">
+        <div className="flex h-full min-h-0 flex-col">
             <SessionHeader
                 session={props.session}
                 onBack={props.onBack}
diff --git a/web/src/router.tsx b/web/src/router.tsx
index 5c1f2f74..b755fa3f 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -368,7 +368,10 @@ function NewSessionPage() {
                 <div className="flex-1 font-semibold">{t('newSession.title')}</div>
             </div>
 
-            <div className="app-scroll-y flex-1 min-h-0">
+            <div
+                className="app-scroll-y flex-1 min-h-0"
+                style={{ paddingBottom: 'calc(var(--app-floating-bottom-offset, 0px) + env(safe-area-inset-bottom))' }}
+            >
                 {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 45cd1727..cb06a1da 100644
--- a/web/src/routes/sessions/file.tsx
+++ b/web/src/routes/sessions/file.tsx
@@ -196,7 +196,7 @@ export default function FilePage() {
     const diffErrorMessage = diffError ? `Diff unavailable: ${diffError}` : null
 
     return (
-        <div className="flex h-full flex-col">
+        <div className="flex h-full min-h-0 flex-col">
             <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-content flex items-center gap-2 p-3 border-b border-[var(--app-border)]">
                     <button
@@ -249,7 +249,7 @@ export default function FilePage() {
                 </div>
             ) : null}
 
-            <div className="app-scroll-y flex-1">
+            <div className="app-scroll-y flex-1 min-h-0">
                 <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 8435c4d4..ca28e3d0 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -306,7 +306,7 @@ export default function FilesPage() {
     }, [navigate, sessionId])
 
     return (
-        <div className="flex h-full flex-col">
+        <div className="flex h-full min-h-0 flex-col">
             <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-content flex items-center gap-2 p-3 border-b border-[var(--app-border)]">
                     <button
@@ -390,7 +390,7 @@ export default function FilesPage() {
                 </div>
             ) : null}
 
-            <div className="app-scroll-y flex-1">
+            <div className="app-scroll-y flex-1 min-h-0">
                 <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/sessions/terminal.tsx b/web/src/routes/sessions/terminal.tsx
index 3b0abdfc..d8a0f77f 100644
--- a/web/src/routes/sessions/terminal.tsx
+++ b/web/src/routes/sessions/terminal.tsx
@@ -409,7 +409,7 @@ export default function TerminalPage() {
           : null
 
     return (
-        <div className="flex h-full flex-col">
+        <div className="flex h-full min-h-0 flex-col">
             <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-content flex items-center gap-2 p-3 border-b border-[var(--app-border)]">
                     <button
@@ -452,7 +452,7 @@ export default function TerminalPage() {
                 </div>
             ) : null}
 
-            <div className="flex-1 overflow-hidden bg-[var(--app-bg)]">
+            <div className="flex-1 min-h-0 overflow-hidden bg-[var(--app-bg)]">
                 <div className="mx-auto h-full w-full max-w-content p-3">
                     {terminalSupported ? (
                         <TerminalView onMount={handleTerminalMount} onResize={handleResize} className="h-full w-full" />
diff --git a/web/src/routes/settings/index.tsx b/web/src/routes/settings/index.tsx
index d7eb3de9..971f2171 100644
--- a/web/src/routes/settings/index.tsx
+++ b/web/src/routes/settings/index.tsx
@@ -177,7 +177,7 @@ export default function SettingsPage() {
     }, [isOpen, isAppearanceOpen, isFontOpen, isTerminalFontOpen, isVoiceOpen])
 
     return (
-        <div className="flex h-full flex-col">
+        <div className="flex h-full min-h-0 flex-col">
             <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-content flex items-center gap-2 p-3 border-b border-[var(--app-border)]">
                     <button
@@ -191,7 +191,7 @@ export default function SettingsPage() {
                 </div>
             </div>
 
-            <div className="app-scroll-y flex-1">
+            <div className="app-scroll-y flex-1 min-h-0">
                 <div className="mx-auto w-full max-w-content">
                     {/* Language section */}
                     <div className="border-b border-[var(--app-divider)]">