BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(mobile): let the keyboard shrink the page on Android browsers

Browse Source 
The pre-dvh -webkit-fill-available viewport fix freezes Android Chrome's
root at the pre-keyboard height; when interactive-widget=resizes-content
shrinks the viewport, the document stays taller than the screen and the
clipped composer hides behind the keyboard with no way to scroll to it.
dvh-capable browsers now take a dynamic 100dvh instead, and the legacy
fallback keeps serving browsers without dvh.
This commit is contained in:
Bohdan Triapitsyn
2026-08-26 20:24:27 +03:00
parent 057a4447a3
commit ea405eafdc
1 changed files with 27 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/mobile.css
+27
View File
@@ -142,6 +142,23 @@
min-height: 0;
}
/* -webkit-fill-available above is a pre-dvh iOS Safari fix. On Android
Chrome it freezes the root at the pre-keyboard height: when
interactive-widget=resizes-content shrinks the viewport, the document
stays taller than the screen and (with overflow hidden) the composer's
bottom is clipped behind the keyboard with no way to scroll to it.
Every dvh-capable browser gets the dynamic height instead; the legacy
fallback above keeps serving browsers without dvh. */
@supports (height: 100dvh) {
:root.mobile-pointer:not(.desktop-runtime) {
height: 100dvh;
}
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
height: 100dvh;
}
}
/* Fix main content area */
:root.mobile-pointer:not(.desktop-runtime) .flex-1.overflow-hidden {
min-height: 0;
@@ -216,6 +233,16 @@
min-height: -webkit-fill-available;
}
/* Same Android-keyboard clipping fix as above: dvh-capable browsers
must not keep a frozen -webkit-fill-available minimum. */
@supports (min-height: 100dvh) {
:root.device-mobile:not(.desktop-runtime) .flex.flex-col.h-screen,
:root.device-tablet:not(.desktop-runtime) .flex.flex-col.h-screen,
:root.mobile-pointer:not(.desktop-runtime) .flex.flex-col.h-screen {
min-height: 100dvh;
}
}
/* Prevent content overlap in iOS */
:root.device-mobile:not(.desktop-runtime) .flex-1.overflow-hidden,
:root.device-tablet:not(.desktop-runtime) .flex-1.overflow-hidden,