From 319236421dbe853bb7664aa26e688ce38ed038c6 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Tue, 16 Jun 2026 18:09:46 -0700 Subject: [PATCH] fix(mobile): force native webview safe-area padding on Android Relying on env(safe-area-inset-*) in remotely-served dashboard CSS was unreliable (depends on device Chromium version reporting insets + the service-worker-cacheable CSS being current). Configure @capacitor-community/safe-area with detectViewportFitCoverChanges:false + initialViewportFitCover:false so it pads the whole webview natively on every Android device, guaranteeing the app never renders under the status/nav bars regardless of CSS or webview version. --- packages/mobile/capacitor.config.ts | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/mobile/capacitor.config.ts b/packages/mobile/capacitor.config.ts index 6728f1386c..ffc245fe56 100644 --- a/packages/mobile/capacitor.config.ts +++ b/packages/mobile/capacitor.config.ts @@ -7,13 +7,20 @@ 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. + // FNXC:MobileShell 2026-06-16-19:20: status-bar overlap fix. + // The mobile app is a thin Capacitor webview wrapping the Fusion dashboard, + // often loaded REMOTELY (server.url). Relying on env(safe-area-inset-*) in the + // served CSS is fragile: it depends on the device Chromium version reporting + // insets AND on the (cacheable, service-worker-backed) dashboard CSS being + // current. Instead we force @capacitor-community/safe-area to pad the WHOLE + // webview natively on every Android device. Per the plugin docs, setting both + // flags false makes it "only add padding around the webview on all Android + // devices" and stop passing insets through, so the app can never render under + // the status/navigation bars regardless of CSS or webview version. plugins: { SafeArea: { - // Content is the Fusion dashboard which uses viewport-fit=cover. - initialViewportFitCover: true, + detectViewportFitCoverChanges: false, + initialViewportFitCover: false, }, }, server: {