Cahnges to make compatible

app.vue

@@ -19,7 +19,7 @@ const dev = process.dev
 useHead({
   title:"FEDEO",
   meta: [
-    { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+    { name: 'viewport', content: 'width=device-width, initial-scale=1, viewport-fit=cover' },
   ],
   link: [
     { rel: 'icon', href: '/favicon.ico' }
@@ -45,14 +45,17 @@ useSeoMeta({
 </script>
 
 <template>
-  <NuxtLayout>
-    <NuxtPage/>
-  </NuxtLayout>
+  <div class="safearea">
+    <NuxtLayout>
+      <NuxtPage/>
+    </NuxtLayout>
+
+    <UNotifications/>
+    <USlideovers />
+    <UModals />
+    <VitePwaManifest/>
+  </div>
 
-  <UNotifications/>
-  <USlideovers />
-  <UModals />
-  <VitePwaManifest/>
 
 
 </template>
@@ -122,5 +125,11 @@ useSeoMeta({
     color: #69c350
   }
 
-
+.safearea {
+  margin-top: env(safe-area-inset-top, 10px) !important;
+  margin-left: env(safe-area-inset-left, 5px) !important;
+  margin-right: env(safe-area-inset-right, 5px) !important;
+  margin-bottom: env(safe-area-inset-bottom, 37px) !important;
+  /*background-color: grey;*/
+}
 </style>