fix(mobile): resolve Android status-bar overlap via safe-area plugin

Android WebView returns 0 for env(safe-area-inset-top) by default, so the
CSS-only header inset had no effect on edge-to-edge devices (API 35+).

- Add @capacitor-community/safe-area@^7.0.0 (Capacitor 7 compatible); it
  patches the webview so env(safe-area-inset-*) report real values. Enabled
  natively (no JS init), so it works in remote/live mode too.
- capacitor.config.ts: declare SafeArea plugin (initialViewportFitCover).
- mobile-run-android.sh: idempotently enable EdgeToEdge in MainActivity after
  cap add (android/ is generated/gitignored), required by the plugin.
This commit is contained in:
gsxdsm
2026-06-16 18:03:41 -07:00
parent 3158e9c6c7
commit 91c99dd93e
4 changed files with 59 additions and 123 deletions

View File

@@ -1,3 +1,4 @@
/// <reference types="@capacitor-community/safe-area" />
import type { CapacitorConfig } from "@capacitor/cli";
const liveReloadEnabled = process.env.FUSION_LIVE_RELOAD === "true";
@@ -6,6 +7,15 @@ const config: CapacitorConfig = {
appId: "com.fusion.mobile",
appName: "Fusion",
webDir: "../dashboard/dist/client",
// FNXC:MobileShell 2026-06-16-18:40: @capacitor-community/safe-area patches
// Android edge-to-edge so env(safe-area-inset-*) reports correct values to the
// webview (status-bar overlap fix). Defaults are fine; it is enabled natively.
plugins: {
SafeArea: {
// Content is the Fusion dashboard which uses viewport-fit=cover.
initialViewportFitCover: true,
},
},
server: {
url: liveReloadEnabled
? process.env.FUSION_SERVER_URL || "http://localhost:5173"

View File

@@ -23,6 +23,7 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@capacitor-community/safe-area": "^7.0.0",
"@capacitor/app": "^7.1.2",
"@capacitor/core": "^7.0.0",
"@capacitor/preferences": "^7.0.0",