Repository navigation
✨ feat(web): move the composer with the mobile keyboard - #36
Conversation
Chrome on Android reports the on-screen keyboard once, partway through its slide, so the chat jumped instead of travelling with it. In the chat view the keyboard now overlays the page (VirtualKeyboard API) and the composer starts easing up on focus using the last height seen, with Android's IME curve; the browser's report only corrects it. The thread keeps its distance from the end when its height changes, and dialogs over the chat stay clear of the keyboard. Engines without the API are unchanged. The manifest background_color is now the dark background: Chrome paints an installed app's navigation bar with it and the manifest has no dark variant, so the dark theme showed a light strip under the app (also visible while the keyboard opened). Light mode now gets a dark bar and splash instead. Installed apps pick it up on their next WebAPK update.
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
sendself | 5ae39e3 | Oct 20 2026, 03:44 PM |
![oli-review[bot]](https://avatars.githubusercontent.com/in/5062581?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review
This PR makes the chat composer track the Android virtual keyboard by switching to the VirtualKeyboard overlay API, publishing a predicted/stored keyboard height as --keyboard-inset, easing the dock with Android's IME curve, and pinning the thread's scroll position across resizes. Modals also reserve the keyboard inset, and the PWA manifest background is darkened so the installed app's navigation bar is dark.
Risk: low
Automated review — opencode-go/deepseek-v4.1-flash · 1 comment(s)
| aria-labelledby={titleId} | ||
| tabIndex={-1} | ||
| class="animate-modal-in flex max-h-[calc(100dvh-2rem)] w-full max-w-[440px] flex-col overflow-hidden rounded-xl3 bg-elevated shadow-float outline-none" | ||
| class="animate-modal-in flex max-h-full w-full max-w-[440px] flex-col overflow-hidden rounded-xl3 bg-elevated shadow-float outline-none" |
There was a problem hiding this comment.
🟡 minor — Keep the dvh cap for non-overlay browsers
Replacing max-h-[calc(100dvh-2rem)] with max-h-full also affects browsers that never set --keyboard-inset (iOS Safari, Firefox): the panel is now capped by the fixed backdrop's layout-viewport height, which can exceed 100dvh when mobile browser chrome is visible, so tall dialogs (Add device, recovery file) can extend below the visible area. Subtracting the inset keeps the old dvh cap when it is 0 and still shrinks the panel above an overlaid keyboard.
| class="animate-modal-in flex max-h-full w-full max-w-[440px] flex-col overflow-hidden rounded-xl3 bg-elevated shadow-float outline-none" | |
| class="animate-modal-in flex max-h-[calc(100dvh-2rem-var(--keyboard-inset,0px))] w-full max-w-[440px] flex-col overflow-hidden rounded-xl3 bg-elevated shadow-float outline-none" |
There was a problem hiding this comment.
Applied in df2c371: the panel keeps the dvh cap and subtracts the keyboard inset (0 where it is not overlaid).
There was a problem hiding this comment.
Review
This follow-up commit applies the previously requested fix to the shared Modal: the panel keeps a dvh-based height cap and now subtracts the overlaid keyboard inset, so dialogs stay within the visible viewport in both overlay and non-overlay browsers. No other behavior changes.
Risk: low
Automated review — opencode-go/deepseek-v4.1-flash · 0 comment(s) · incremental
1 participant
Summary
Two mobile/PWA fixes for the chat:
Composer travels with the keyboard (Chromium/Android). Chrome reports the on-screen keyboard once, ~100–170 ms into its slide, never frame by frame (measured on device). With
interactive-widget=resizes-contentthe page jumped. Now, while the chat is mounted:navigator.virtualKeyboard.overlaysContent), andui/keyboard.tspublishes--keyboard-inset.cubic-bezier(0.2, 0, 0, 1)).geometrychangeonly corrects it, and a timed resync handles hardware keyboards. Closing starts on blur..keyboard-docktakesmax(safe-area, keyboard)instead of adding them.usePinnedScrollEnd), and modals stay clear of the keyboard.Dark navigation bar in the installed app. Chrome paints a WebAPK's system navigation bar with the manifest
background_color(#f8f4f2, confirmed by sampling a device screenshot), and the manifest has no dark variant. Under the dark theme this showed a light strip, also visible while the keyboard opened.background_coloris now#0c0a09.Compatibility
Testing