DONE: fix issue on top header where it is hidden on iOS

index.html

@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
   <title>MyKOPKB 1.0</title>
 </head>
 

src/themes/Enigma/SideMenu/SideMenu.vue

@@ -182,7 +182,8 @@ onUnmounted(() => {
       </div>
     </div>
     <div :class="[
-      'content h-screen transition-[margin,width] duration-100 pt-32 pb-8 px-7 z-10 relative group',
+      'content relative z-10 h-screen px-7 pb-8 transition-[margin,width] duration-100 group',
+      'pt-[calc(8rem+env(safe-area-inset-top,0px))]',
       'before:absolute before:bottom-4 before:top-27 before:-ml-px before:right-4 before:opacity-[.07] before:left-4 xl:before:left-0 before:bg-foreground before:rounded-4xl',
       'after:absolute after:bottom-4 after:top-27 after:-ml-px after:right-4 after:left-4 xl:after:left-0 after:bg-[color-mix(in_oklch,var(--color-background),var(--color-foreground)_2%)] after:rounded-4xl after:border after:border-foreground/15 dark:after:opacity-[.59]',
       'xl:ml-[320px]',
@@ -192,19 +193,17 @@ onUnmounted(() => {
         'relative h-full',
         '[--color-nav-foreground:var(--color-background)] dark:[--color-nav-foreground:var(--color-foreground)]',
       ]">
-        <div class="h-full overflow-x-hidden">
+        <!-- TOP HEADER must sit outside overflow scroll ancestors so position:fixed works on iOS -->
-          <div @scroll="onScrollContent"
-            class="content__scroll-area relative z-20 -mr-7 h-full overflow-y-auto pl-4 pr-11 pb-5 pt-2 transition-[margin] duration-100 xl:pl-0">
-            <!-- TOP HEADER (top-bar: breadcrumb, role switch, notifications, profile) -->
         <div :class="[
-              'top-bar group fixed inset-x-0 mt-3 top-0 z-50 pl-9 xl:pl-6 pr-9 xl:pr-5 transition-[margin,width] duration-100 xl:ml-[320px] xl:mr-5 group-[.content--compact]:xl:ml-[165px]',
+          'top-bar group fixed inset-x-0 z-50 pl-9 pr-9 transition-[margin,width] duration-100 xl:ml-[320px] xl:mr-5 xl:pl-6 xl:pr-5 group-[.content--compact]:xl:ml-[165px]',
-              'before:inset-y-0 before:left-4 before:transition-[margin] before:duration-100 before:right-0 before:absolute xl:before:ml-[-320px] group-[.content--compact]:xl:before:ml-[-165px] before:bg-primary before:border before:border-primary dark:before:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:before:bg-[color-mix(in_oklch,var(--color-background),white_14%)] before:my-3 before:rounded-2xl before:mr-4 xl:before:-mr-1',
+          'top-[max(0.75rem,env(safe-area-inset-top,0px))]',
-              'after:inset-0 after:left-8 after:transition-[margin] after:duration-100 after:right-0 after:absolute xl:after:ml-[-320px] group-[.content--compact]:xl:after:ml-[-165px] after:bg-primary/30 after:border after:border-primary/10 dark:after:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:after:bg-[color-mix(in_oklch,var(--color-background),white_14%)] after:z-[-1] after:mb-3 after:rounded-2xl after:mr-8 xl:after:mr-4',
+          'before:absolute before:inset-y-0 before:left-4 before:right-0 before:my-3 before:mr-4 before:rounded-2xl before:border before:border-primary before:bg-primary before:transition-[margin] before:duration-100 xl:before:-mr-1 xl:before:ml-[-320px] group-[.content--compact]:xl:before:ml-[-165px] dark:before:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:before:bg-[color-mix(in_oklch,var(--color-background),white_14%)]',
+          'after:absolute after:inset-0 after:left-8 after:right-0 after:z-[-1] after:mb-3 after:mr-8 after:rounded-2xl after:border after:border-primary/10 after:bg-primary/30 after:transition-[margin] after:duration-100 xl:after:mr-4 xl:after:ml-[-320px] group-[.content--compact]:xl:after:ml-[-165px] dark:after:border-[color-mix(in_oklch,var(--color-background),white_27%)] dark:after:bg-[color-mix(in_oklch,var(--color-background),white_14%)]',
           { scrolled: scrolled },
         ]">
-              <div :class="['relative z-20 flex h-[90px] items-center gap-5']">
+          <div class="relative z-20 flex h-[90px] items-center gap-5">
             <div @click="openMobileMenu"
-                  class="open-mobile-menu bg-(--color-nav-foreground)/10 border-(--color-nav-foreground)/30 mr-auto flex size-9 cursor-pointer items-center justify-center rounded-xl border xl:hidden">
+              class="open-mobile-menu mr-auto flex size-9 cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 xl:hidden">
               <Lucide class="rotate-90 [--color:var(--color-nav-foreground)]" icon="ChartNoAxesColumn" />
             </div>
             <Breadcrumb v-if="breadcrumbItems.length"
@@ -234,6 +233,9 @@ onUnmounted(() => {
             </div>
           </div>
         </div>
+        <div class="h-full overflow-x-hidden">
+          <div @scroll="onScrollContent"
+            class="content__scroll-area relative z-20 -mr-7 h-full overflow-y-auto pl-4 pr-11 pb-5 pt-2 transition-[margin] duration-100 xl:pl-0">
             <EmailVerificationBanner
               v-if="authStore.isAuthenticated && !authStore.isEmailVerified"
               class="mb-4"