From 2877180381724378dd9324b0825b463961f4d3f6 Mon Sep 17 00:00:00 2001 From: MerverliPy Date: Wed, 8 Jul 2026 11:09:34 -0500 Subject: [PATCH 1/2] 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 . From 17d5c393cede605df5c6b1a49e2ef90696752d95 Mon Sep 17 00:00:00 2001 From: MerverliPy Date: Wed, 8 Jul 2026 11:19:59 -0500 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20iOS=20keyboard=20script=20targets=20?= =?UTF-8?q?null=20body=20=E2=80=94=20use=20document.documentElement?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/mobile-web/index.html | 18 ++++++++++-------- apps/mobile-web/src/styles/index.css | 15 +++++++++++++-- 2 files changed, 23 insertions(+), 10 deletions(-) diff --git a/apps/mobile-web/index.html b/apps/mobile-web/index.html index d620d6f..45114d9 100644 --- a/apps/mobile-web/index.html +++ b/apps/mobile-web/index.html @@ -32,31 +32,33 @@