From 2877180381724378dd9324b0825b463961f4d3f6 Mon Sep 17 00:00:00 2001 From: MerverliPy Date: Wed, 8 Jul 2026 11:09:34 -0500 Subject: [PATCH] fix: prevent iOS keyboard from covering chat input - Add interactive-widget=resizes-content to viewport meta - Override .h-dvh with --vh (visualViewport height) when keyboard is open - Add --kb-height padding on composer to stay above keyboard - Scroll textarea into view on focus --- apps/mobile-web/index.html | 2 +- apps/mobile-web/src/components/PromptInput.tsx | 9 +++++++++ apps/mobile-web/src/styles/index.css | 10 ++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/apps/mobile-web/index.html b/apps/mobile-web/index.html index f509564..d620d6f 100644 --- a/apps/mobile-web/index.html +++ b/apps/mobile-web/index.html @@ -2,7 +2,7 @@ - + diff --git a/apps/mobile-web/src/components/PromptInput.tsx b/apps/mobile-web/src/components/PromptInput.tsx index a959e1b..20499fd 100644 --- a/apps/mobile-web/src/components/PromptInput.tsx +++ b/apps/mobile-web/src/components/PromptInput.tsx @@ -89,8 +89,16 @@ export function PromptInput(): JSX.Element { const hasText = () => inputText().trim().length > 0; + function handleFocus(): void { + // Small delay to let the keyboard open and layout settle + setTimeout(() => { + textareaRef?.scrollIntoView({ behavior: "smooth", block: "nearest" }); + }, 300); + } + return (
@@ -136,6 +144,7 @@ export function PromptInput(): JSX.Element { placeholder="Type a message..." rows={1} value={inputText()} + onFocus={handleFocus} onInput={(e) => { setInputText((e.target as HTMLTextAreaElement).value); queueMicrotask(() => autoResize()); diff --git a/apps/mobile-web/src/styles/index.css b/apps/mobile-web/src/styles/index.css index 53e680e..8165815 100644 --- a/apps/mobile-web/src/styles/index.css +++ b/apps/mobile-web/src/styles/index.css @@ -321,6 +321,16 @@ textarea { height: 100dvh; } +/* When iOS virtual keyboard is open — use visualViewport height */ +html.keyboard-open .h-dvh { + height: var(--vh, 100dvh); +} + +/* Ensure the composer has bottom room when keyboard is open */ +html.keyboard-open [data-composer] { + padding-bottom: max(var(--safe-bottom), var(--kb-height, 0px)); +} + /* ── Backdrop-filter fallback ──────────────────── */ /* Safari <15 / low-power mode may not support backdrop-filter. The .frost class is applied by and .