Fix safe area insets

capacitor.config.ts

@@ -5,14 +5,14 @@ const config: CapacitorConfig = {
   appName: "Flotilla",
   webDir: "build",
   android: {
-    adjustMarginsForEdgeToEdge: false,
+    adjustMarginsForEdgeToEdge: true,
   },
   plugins: {
     CapacitorHttp: {
       enabled: true,
     },
     SystemBars: {
-      insetsHandling: "disable",
+      insetsHandling: "enable",
     },
     SplashScreen: {
       androidSplashResourceName: "splash",

src/app.css

@@ -102,19 +102,19 @@
   }
 
   .mt-sai {
-    padding-top: var(--sait);
+    margin-top: var(--sait);
   }
 
   .mr-sai {
-    padding-right: var(--sair);
+    margin-right: var(--sair);
   }
 
   .mb-sai {
-    padding-bottom: var(--saib);
+    margin-bottom: var(--saib);
   }
 
   .ml-sai {
-    padding-left: var(--sail);
+    margin-left: var(--sail);
   }
 
   .mx-sai {