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,5 +1,6 @@
 <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="p-2">
       <div class="flex items-center">
         <router-link :to="{ name: '/' }">
           <Logo class="logo [&_.secondary-fill]:fill-secondary h-8" />
@@ -22,6 +23,7 @@
           <SideMenu class="flex-1" />
         </div>
       </transition>
+    </div>
   </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" />