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 .