fix(mobile): browser composer keyboard handling on chat and draft screens

Mobile browsers don't shrink the layout for the keyboard, so the
fullscreen composer is now pinned to the visual viewport (fixed at its
offset and height, tracked as the browser pans) instead of overflowing
underneath it; the draft screen's normal composer gets the same pinning
anchored to the visible bottom via a rAF tracker, since Safari's own
focused-field reveal proved unreliable there after leaving fullscreen.
The draft and empty-session roots drop their transform-gpu (a transform
would make them the containing block for the pinned form), the app
header hides while the browser fullscreen composer is up (the form can't
out-stack it from inside the composer wrapper's stacking context), and
leaving fullscreen nudges the still-focused field back into view.
Draft starter chips now hide while the keyboard is open in browsers too,
via an oc-browser-keyboard-open root class driven by composer focus.
This commit is contained in:
Bohdan Triapitsyn
2026-07-05 09:14:55 +03:00
parent ed07e7de18
commit b09e073e86
4 changed files with 131 additions and 4 deletions
+9 -1
View File
@@ -661,7 +661,8 @@
with the keyboard up there is only room for the draft title. Instant
show/hide (no squish animation); the title's own keyboard compensation
(.oc-draft-center below) carries the smooth motion. */
:root.oc-capacitor-app.oc-keyboard-open .oc-draft-starters {
:root.oc-capacitor-app.oc-keyboard-open .oc-draft-starters,
:root.oc-browser-keyboard-open .oc-draft-starters {
display: none;
}
@@ -672,6 +673,13 @@
list in useNativeMobileChrome. No CSS rules needed here; the class only
marks the element for the mover query. */
/* Mobile-browser fullscreen composer (visual-viewport pinned form in
ChatInput): the header would otherwise paint above it — the form can't
out-stack it from inside the composer wrapper's z-10 context. */
:root.oc-browser-kb-fullscreen .oc-mobile-header {
visibility: hidden;
}
@keyframes oc-composer-morph-fade {
from { opacity: 0; }
to { opacity: 1; }