ios bar padding

frontend/app.vue

@@ -5,7 +5,7 @@
           <h2 class="mt-2 font-bold">Loading...</h2>
         </div>
     </div>
-    <div v-else>
+    <div v-else class="">
         <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
             <LayoutTopbar />
             <div class="overflow-y-auto pt-3">
@@ -227,9 +227,9 @@ const ledenlijst = ref([])
 provide('firebase', { db, ledenlijst, isAuthenticated, user, userData, userPersons, auth, userAllPersons, getPersons, calEvents, news, registrationToken, contestTimes, competitors })
 </script>
 
-<style>
+<style scoped>
 .body {
-  margin-top: env(safe-area-inset-top);
+  padding-top: 10px;
   margin-bottom: env(safe-area-inset-bottom);
 }
 

frontend/components/layout/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="route.meta.key !== 'disable'" class="w-full h-16 py-3 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow">
+    <div v-if="route.meta.key !== 'disable'" class="w-full bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow" :class="platform === 'ios' ? 'navbar' : 'py-3'">
         <div class="flex text-sm justify-evenly items-center gap-1 w-full max-w-lg dark:text-gray-300 text-gray-900 overflow-x-hidden">
             <NuxtLink to="/" class="flex flex-col items-center hover:cursor-pointer drop-shadow" :class="route.path === '/' ? 'text-primary' : ''">
                 <Icon size="1.8em" name="ion:home-outline" />
@@ -26,7 +26,23 @@
 </template>
 
 <script setup>
-const route = useRoute()
+import { Device } from '@capacitor/device';
 
+const route = useRoute()
 const { userData } = inject('firebase')
+
+const platform = ref(null)
+
+onMounted(() => {
+   Device.getInfo().then(info => {
+    platform.value = info.platform
+  });
+})
 </script>
+
+<style>
+.navbar {
+  padding-bottom: calc(env(safe-area-inset-bottom) - 10px);
+  padding-top: 12px;
+}
+</style>

frontend/components/layout/Topbar.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-if="route.meta.key !== 'disable'" class="w-full py-3 h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
+    <div v-if="route.meta.key !== 'disable'" class="w-full topbar h-10 bg-neutral-200 dark:bg-neutral-800 flex justify-center items-center shadow px-5 gap-2">
         <div class="flex justify-evenly items-center gap-3 w-full max-w-xl dark:text-gray-300 text-gray-900">
             <Icon v-if="route.meta.key === 'back'" size="1.75em" @click="router.back()" class="hover:cursor-pointer" name="ion:arrow-back"/>
             <h1 class="capitalize font-bold text-xl mr-auto">{{ route.meta.title }}</h1>
@@ -11,3 +11,10 @@
 const route = useRoute()
 const router = useRouter()
 </script>
+
+<style>
+.topbar {
+  padding-top: calc(env(safe-area-inset-bottom) + 20px);
+  padding-bottom: 20px;
+}
+</style>

frontend/nuxt.config.ts

@@ -14,6 +14,7 @@ export default defineNuxtConfig({
       head: {
         title: 'WRB App',
         charset: 'utf-8',
+        viewport: 'width=device-width initial-scale=1 viewport-fit=cover',
         meta: [
           { name: 'theme-color', content: '#eb6330' },
           {  name: 'description', content: 'De officiele app voor de Waddinxveense Reddingsbrigade'}

frontend/pages/wedstrijd/index.vue

@@ -11,7 +11,7 @@
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>
             <div class="divider" />
-            <NuxtLink to="/settings" class="rounded-b item-hover py-2 flex items-center">
+            <NuxtLink to="/wedstrijd/addcontest" class="rounded-b item-hover py-2 flex items-center">
                 <span>Wedstrijd Toevoegen</span>
                 <Icon class="ml-auto" size="2em" name="ion:arrow-forward"/>
             </NuxtLink>