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

fix(mobile): keep Android content clear of the navigation bar

Browse Source 
Android 15+ enforces edge-to-edge, and Capacitor stops padding the WebView
once it can hand the insets to the page instead — so the app draws under
the gesture/navigation bar. Only the top inset was ever consumed: full
cover surfaces ignored the bottom one entirely, which is why a settings
list ran under the bar, and the chat shell reserved half of it, which is
enough for a home indicator but not for a bar that swallows taps.

Reserve the full inset in the shell on Android and give the surfaces that
own the bottom edge — fullscreen surfaces, the workspace drawer, bottom
sheets — an opt-in class that pads them. The sessions drawer already did
this through its footer, so it stays as it is. Capacitor reports a zero
bottom inset while the keyboard is up, so none of this stacks with the
keyboard inset. iOS deliberately keeps its softer visual inset.

Testing: package type-check and lint; drove the mobile surface in a
browser with the Android platform class and a simulated 48px inset (shell
and surfaces reserve exactly that, drawer footer unchanged, and removing
the class returns every surface to zero).
This commit is contained in:
Bohdan Triapitsyn
2026-09-09 17:41:14 +03:00
parent fd416a3678
commit 1294a90e52
4 changed files with 20 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/styles/mobile.css
+16
View File
@@ -470,6 +470,22 @@
padding-top: var(--oc-safe-area-top);
}
/* Android 15+ enforces edge-to-edge, and once the WebView can read the insets
itself Capacitor stops padding the view and just hands them over — so the app
draws under the navigation/gesture bar and every full-cover surface has to
keep its own content clear of it. Marked surfaces opt in through
.oc-bottom-safe-surface; iOS deliberately stays on its softer visual inset,
where the home indicator is a thin overlay rather than a bar that eats taps.
Capacitor reports a zero bottom inset while the keyboard is up, so this never
stacks with --oc-keyboard-inset. */
:root.oc-capacitor-app.oc-platform-android {
--oc-app-bottom-safe: max(16px, var(--oc-safe-area-bottom));
}
:root.oc-capacitor-app.oc-platform-android .oc-bottom-safe-surface {
padding-bottom: var(--oc-safe-area-bottom);
}
:root.oc-capacitor-app.oc-platform-android [data-sonner-toaster][data-y-position='top'] {
top: calc(var(--oc-safe-area-top) + 16px) !important;
}