fix notch spacing

6 files changed, 16 insertions, 6 deletions

diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
index fdb4970c..52f8ca0c 100644
--- a/android/app/capacitor.build.gradle
+++ b/android/app/capacitor.build.gradle
@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-status-bar')
 
 }
 
diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
index 9a5fa872..c736879f 100644
--- a/android/capacitor.settings.gradle
+++ b/android/capacitor.settings.gradle
@@ -1,3 +1,6 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-status-bar'
+project(':capacitor-status-bar').projectDir = new File('../node_modules/@capacitor/status-bar/android')
diff --git a/bun.lockb b/bun.lockb
index 92720150..8dd85e14 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/capacitor.config.json b/capacitor.config.json
index 99458def..a1b10b40 100644
--- a/capacitor.config.json
+++ b/capacitor.config.json
@@ -12,6 +12,11 @@
     "immersive": false
   },
   "plugins": {
-    "NfcWriter": {}
+    "NfcWriter": {},
+    "StatusBar": {
+      "overlaysWebView": false,
+      "style": "DARK",
+      "backgroundColor": "#ffffffff"
+    }
   }
 }
diff --git a/package.json b/package.json
index dfe2b380..edd715d7 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
   },
   "type": "module",
   "dependencies": {
+    "@capacitor/status-bar": "^7.0.1",
     "canvas": "^3.1.2",
     "cordova-plugin-android-notch": "^1.0.3",
     "qrcode": "^1.5.4"
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2b3c99bf..7e0d28a5 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -25,12 +25,13 @@
       $installPrompt = event;
     });
 
-    if (typeof window.AndroidNotch !== "undefined") {
+    let hasNotch = typeof window.AndroidNotch !== "undefined";
+    if (hasNotch) {
       window.AndroidNotch.getInsetTop(
         (px) => {
           document.documentElement.style.setProperty(
             "--safe-area-inset-top",
-            px + "px",
+            Math.round(px) + "px",
           );
         },
         (err) => {
@@ -42,7 +43,7 @@
         (px) => {
           document.documentElement.style.setProperty(
             "--safe-area-inset-bottom",
-            px + "px",
+            24 + "px",
           );
         },
         (err) => {
@@ -85,7 +86,7 @@
     --toastContainerLeft: calc(50vw - 8rem);
     --toastBackground: #292929;
 
-    --safe-area-inset-top: 24px;
+    --safe-area-inset-top: 0px;
     --safe-area-inset-bottom: 0px;
   }