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:
@@ -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"
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user