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

fix(mobile): pad Android app below the status bar on Android 15

Browse Source 
Android 15 enforces edge-to-edge and ignores the StatusBar overlay:false
inset the app relied on, while every --oc-safe-area-* CSS definition was
gated behind iOS-only conditions. Read the Capacitor-injected
--safe-area-inset-* vars (with env() fallback) on the Android native
shell so the header, top toasts, and connect screen clear the status
bar; both sources report 0 where the native inset still applies.
This commit is contained in:
Bohdan Triapitsyn
2026-07-10 20:25:48 +03:00
parent e9102df5f7
commit 33cbd0b836
2 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/mobile.css
+26 -1
View File
@@ -519,7 +519,32 @@
not match — so nothing reserves bottom room in the native app. Expose it as a token
so any native surface can consume it; the chat shell does so below. */
:root.oc-capacitor-app {
--oc-app-bottom-safe: max(16px, calc(env(safe-area-inset-bottom, 0px) * 0.5));
--oc-app-bottom-safe: max(16px, calc(var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) * 0.5));
}
/* Android native safe areas. Every --oc-safe-area-* definition above is gated
behind -webkit-touch-callout (iOS) or display-mode: standalone, neither of
which matches the Capacitor Android WebView — so the Android app used to rely
entirely on StatusBar overlay:false insetting the WebView natively. Android 15
enforces edge-to-edge and ignores that call, leaving content under the status
bar. Capacitor injects the real insets as --safe-area-inset-* inline vars on
<html> (env() still reads 0 on WebViews without the safe-area passthrough
fix), so read those first and fall back to env(). On devices where the native
inset still applies, both sources report 0 — no double padding. */
:root.oc-capacitor-app.oc-platform-android {
--oc-safe-area-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
--oc-safe-area-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));
--oc-safe-area-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
--oc-safe-area-bottom-visual: clamp(0px, calc(var(--oc-safe-area-bottom) * 0.05), 4px);
--oc-safe-area-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}
:root.oc-capacitor-app.oc-platform-android .header-safe-area {
padding-top: var(--oc-safe-area-top);
}
:root.oc-capacitor-app.oc-platform-android [data-sonner-toaster][data-y-position='top'] {
top: calc(var(--oc-safe-area-top) + 16px) !important;
}
/* Paint the document canvas with the theme background in the native app — the same