fix(web): keep mobile views scrollable and new-session actions reachable (#364)

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

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}

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}

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}