feat: add viewport height tracking and improve scroll behavior on mobile

web/src/components/ChatInput.tsx

@@ -196,7 +196,15 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, ChatInputProps>(functi
 
     // Imperative handle
     useImperativeHandle(ref, () => ({
-        focus: () => textareaRef.current?.focus(),
+        focus: () => {
+            const el = textareaRef.current
+            if (!el) return
+            try {
+                el.focus({ preventScroll: true })
+            } catch {
+                el.focus()
+            }
+        },
         blur: () => textareaRef.current?.blur()
     }), [])
 
@@ -257,7 +265,11 @@ export const ChatInput = memo(forwardRef<ChatInputHandle, ChatInputProps>(functi
         setTimeout(() => {
             if (textareaRef.current) {
                 textareaRef.current.setSelectionRange(result.cursorPosition, result.cursorPosition)
-                textareaRef.current.focus()
+                try {
+                    textareaRef.current.focus({ preventScroll: true })
+                } catch {
+                    textareaRef.current.focus()
+                }
             }
         }, 0)
 

web/src/components/SessionChat.tsx

@@ -106,7 +106,7 @@ export function SessionChat(props: {
                 </div>
             ) : null}
 
-            <div ref={scrollRef} className="flex-1 overflow-y-auto">
+            <div ref={scrollRef} className="relative flex min-h-0 flex-1 flex-col overflow-y-auto">
                 <div className="mx-auto w-full max-w-[720px] p-3">
                     {props.messagesWarning ? (
                         <div className="mb-3 rounded-md bg-amber-500/10 p-2 text-xs">
@@ -183,22 +183,24 @@ export function SessionChat(props: {
                         </>
                     )}
                 </div>
-            </div>
 
-            <ChatInput
-                disabled={props.isSending || controlsDisabled}
-                onSend={props.onSend}
-                sessionId={props.session.id}
-                permissionMode={props.session.permissionMode}
-                modelMode={props.session.modelMode}
-                active={props.session.active}
-                thinking={props.session.thinking}
-                agentState={props.session.agentState}
-                contextSize={reduced.latestUsage?.contextSize}
-                onPermissionModeChange={handlePermissionModeChange}
-                onModelModeChange={handleModelModeChange}
-                onAbort={handleAbort}
-            />
+                <div className="sticky bottom-0 z-10 mt-auto w-full overflow-visible">
+                    <ChatInput
+                        disabled={props.isSending || controlsDisabled}
+                        onSend={props.onSend}
+                        sessionId={props.session.id}
+                        permissionMode={props.session.permissionMode}
+                        modelMode={props.session.modelMode}
+                        active={props.session.active}
+                        thinking={props.session.thinking}
+                        agentState={props.session.agentState}
+                        contextSize={reduced.latestUsage?.contextSize}
+                        onPermissionModeChange={handlePermissionModeChange}
+                        onModelModeChange={handleModelModeChange}
+                        onAbort={handleAbort}
+                    />
+                </div>
+            </div>
         </div>
     )
 }

web/src/index.css

@@ -66,7 +66,10 @@
 
 html,
 body {
-    height: 100%;
+    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%;