fix: fixes mobile menu having the wrong margin in pwa (#3826)

assets/components/ScrollableView.vue

@@ -2,7 +2,7 @@
   <section :class="{ 'h-screen min-h-0': scrollable }" class="flex flex-col">
     <header
       v-if="$slots.header"
-      class="border-base-content/10 bg-base-200 sticky top-[55px] z-2 border-b py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
+      class="border-base-content/10 bg-base-200 sticky top-[calc(55px+env(safe-area-inset-top))] z-2 border-b py-2 shadow-[1px_1px_2px_0_rgb(0,0,0,0.05)] md:top-0"
     >
       <slot name="header"></slot>
     </header>

assets/components/common/MobileMenu.vue

@@ -1,27 +1,29 @@
 <template>
-  <nav class="border-base-content/20 bg-base-200 fixed top-0 z-10 w-full border-b p-2" data-testid="navigation">
+  <nav class="border-base-content/20 bg-base-200 fixed top-0 z-10 w-full border-b" data-testid="navigation">
-    <div class="flex items-center">
+    <div class="p-2">
-      <router-link :to="{ name: '/' }">
+      <div class="flex items-center">
-        <Logo class="logo [&_.secondary-fill]:fill-secondary h-8" />
+        <router-link :to="{ name: '/' }">
-      </router-link>
+          <Logo class="logo [&_.secondary-fill]:fill-secondary h-8" />
+        </router-link>
 
-      <div class="ml-auto flex items-center gap-2">
+        <div class="ml-auto flex items-center gap-2">
-        <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
+          <a class="btn btn-circle flex" @click="$emit('search')" :title="$t('tooltip.search')">
-          <mdi:magnify class="size-5" />
+            <mdi:magnify class="size-5" />
-        </a>
+          </a>
-        <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
+          <label class="btn btn-circle swap swap-rotate" data-testid="hamburger">
-          <input type="checkbox" v-model="show" />
+            <input type="checkbox" v-model="show" />
-          <mdi:close class="swap-on" />
+            <mdi:close class="swap-on" />
-          <mdi:hamburger-menu class="swap-off" />
+            <mdi:hamburger-menu class="swap-off" />
-        </label>
+          </label>
+        </div>
       </div>
+
+      <transition name="fade">
+        <div v-show="show" class="flex h-[calc(100svh-55px)]">
+          <SideMenu class="flex-1" />
+        </div>
+      </transition>
     </div>
-
-    <transition name="fade">
-      <div v-show="show" class="flex h-[calc(100svh-55px)]">
-        <SideMenu class="flex-1" />
-      </div>
-    </transition>
   </nav>
 </template>
 
@@ -55,4 +57,8 @@ watch(route, () => {
 .fade-leave-to > div {
   @apply -translate-y-10;
 }
+
+nav {
+  padding-top: env(safe-area-inset-top);
+}
 </style>

assets/layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <mobile-menu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></mobile-menu>
+    <MobileMenu v-if="isMobile && !forceMenuHidden" @search="showFuzzySearch"></MobileMenu>
     <Splitpanes @resized="onResized($event)">
       <Pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav && !forceMenuHidden">
         <SidePanel @search="showFuzzySearch" />