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/apps/MobileApp.tsx
+5 -4
View File
@@ -242,9 +242,10 @@ const useNativeMobileChrome = (): void => {
const platform = (window as typeof window & { Capacitor?: { getPlatform?: () => string } }).Capacitor?.getPlatform?.();
const applyStatusBar = async () => {
if (platform === 'android') {
// Android doesn't feed env(safe-area-inset-top) to CSS, so overlaying the status bar
// makes content render under it. Inset the WebView below the bar instead and paint the
// bar with the resolved theme background (the splash colours the theme system persists).
// Inset the WebView below the bar and paint it with the resolved theme background
// (the splash colours the theme system persists). On Android 15+ edge-to-edge is
// enforced and both calls are no-ops — there the app pads itself via the
// Capacitor-injected --safe-area-inset-* CSS vars (see mobile.css, oc-platform-android).
const isDark = document.documentElement.classList.contains('dark');
const themeBg =
(isDark ? localStorage.getItem('splashBgDark') : localStorage.getItem('splashBgLight')) ||
@@ -763,7 +764,7 @@ const MobileConnectionWelcome: React.FC<{ onConnected: () => void }> = ({ onConn
}, [conn]);
return (
<main className="oc-keyboard-fill-screen flex min-h-dvh flex-col overflow-y-auto bg-background px-6 pb-[calc(env(safe-area-inset-bottom)+28px)] pt-[calc(env(safe-area-inset-top)+28px)] text-foreground">
<main className="oc-keyboard-fill-screen flex min-h-dvh flex-col overflow-y-auto bg-background px-6 pb-[calc(var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px))+28px)] pt-[calc(var(--safe-area-inset-top,env(safe-area-inset-top,0px))+28px)] text-foreground">
<div className="m-auto flex w-full max-w-[360px] shrink-0 flex-col items-center gap-9 py-8">
<div className="flex flex-col items-center gap-5 text-center">
<OpenChamberLogo width={72} height={72} className="size-[72px]" />