Add Capacitor Browser dependency and update safe area handling in components

src/utils/StatusBarManager.js

@@ -109,6 +109,16 @@ class StatusBarManager {
     // Note: We no longer apply padding directly to the body to avoid double
     // application with component-level safe area handling. Components should
     // use the CSS custom properties or the utility classes from safe-area.css
+
+    // Let's apply it directly to body for now:
+    if (Capacitor.getPlatform() === 'android') {
+      // removing the top padding on android as it is handled by the navbar
+      // and adding it causes double padding
+      // document.body.style.paddingTop = `${insets.top}px`
+      document.body.style.paddingRight = `${insets.right}px`
+      document.body.style.paddingBottom = `${insets.bottom}px`
+      document.body.style.paddingLeft = `${insets.left}px`
+    }
   }
 
   /**