From 6bc80ea23bb9074539d317a46c255104ea517ae4 Mon Sep 17 00:00:00 2001
From: ISMAIL MASSERAN <topaz@Mac.dlinkrouter.local>
Date: Wed, 23 Sep 2026 14:38:41 +0800
Subject: [PATCH] DONE: fix issue on top header where it is hidden on iOS

---
 index.html                              |  2 +-
 src/themes/Enigma/SideMenu/SideMenu.vue | 82 +++++++++++++------------
 2 files changed, 43 insertions(+), 41 deletions(-)

diff --git a/index.html b/index.html
index da3a3e6..02f0473 100644
--- a/index.html
+++ b/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>
 
diff --git a/src/themes/Enigma/SideMenu/SideMenu.vue b/src/themes/Enigma/SideMenu/SideMenu.vue
index ab02773..ca698b7 100644
--- a/src/themes/Enigma/SideMenu/SideMenu.vue
+++ b/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,48 +193,49 @@ onUnmounted(() => {
         'relative h-full',
         '[--color-nav-foreground:var(--color-background)] dark:[--color-nav-foreground:var(--color-foreground)]',
       ]">
+        <!-- TOP HEADER must sit outside overflow scroll ancestors so position:fixed works on iOS -->
+        <div :class="[
+          '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]',
+          'top-[max(0.75rem,env(safe-area-inset-top,0px))]',
+          '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 @click="openMobileMenu"
+              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"
+              class="mr-auto hidden xl:flex [&_ol]:text-(--color-nav-foreground)/70 [&_li]:last:text-(--color-nav-foreground)/90 [&_li]:hover:text-(--color-nav-foreground)/90"
+              :items="breadcrumbItems" />
+            <div ref="notificationsRef"
+              class="group/notifications relative flex size-10 flex-none cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 transition-colors hover:bg-(--color-nav-foreground)/20"
+              @click.stop="toggleNotifications">
+              <Lucide class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]" icon="Bell" />
+              <span v-if="unreadCount > 0"
+                class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2">
+                {{ unreadCount > 9 ? '9+' : unreadCount }}
+              </span>
+              <NotificationDropdown :open="notificationsOpen"
+                class="absolute right-0 top-full mt-2 origin-top-right"
+                boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
+            </div>
+            <div ref="profileRef" class="group/profile relative size-9 flex-none cursor-pointer"
+              @click.stop="toggleProfile">
+              <AvatarRoot class="ring-(--color)/40 size-full [--color:var(--color-nav-foreground)] rounded-full">
+                <AvatarFallback>{{ authStore.userName }}</AvatarFallback>
+                <AvatarImage v-if="authStore.userImageUrl" :src="authStore.userImageUrl"
+                  :alt="authStore.userName" />
+              </AvatarRoot>
+              <AccountDropdown :open="profileOpen" class="absolute right-0 top-full mt-2 origin-top-right"
+                boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
+            </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">
-            <!-- 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]',
-              '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',
-              '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',
-              { scrolled: scrolled },
-            ]">
-              <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">
-                  <Lucide class="rotate-90 [--color:var(--color-nav-foreground)]" icon="ChartNoAxesColumn" />
-                </div>
-                <Breadcrumb v-if="breadcrumbItems.length"
-                  class="mr-auto hidden xl:flex [&_ol]:text-(--color-nav-foreground)/70 [&_li]:last:text-(--color-nav-foreground)/90 [&_li]:hover:text-(--color-nav-foreground)/90"
-                  :items="breadcrumbItems" />
-                <div ref="notificationsRef"
-                  class="group/notifications relative flex size-10 flex-none cursor-pointer items-center justify-center rounded-xl border border-(--color-nav-foreground)/30 bg-(--color-nav-foreground)/10 transition-colors hover:bg-(--color-nav-foreground)/20"
-                  @click.stop="toggleNotifications">
-                  <Lucide class="size-[22px] stroke-[1.75] [--color:var(--color-nav-foreground)]" icon="Bell" />
-                  <span v-if="unreadCount > 0"
-                    class="bg-danger text-background ring-background absolute -right-1.5 -top-1.5 flex min-w-5 items-center justify-center rounded-full px-1 py-0.5 text-[11px] font-semibold leading-none ring-2">
-                    {{ unreadCount > 9 ? '9+' : unreadCount }}
-                  </span>
-                  <NotificationDropdown :open="notificationsOpen"
-                    class="absolute right-0 top-full mt-2 origin-top-right"
-                    boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
-                </div>
-                <div ref="profileRef" class="group/profile relative size-9 flex-none cursor-pointer"
-                  @click.stop="toggleProfile">
-                  <AvatarRoot class="ring-(--color)/40 size-full [--color:var(--color-nav-foreground)] rounded-full">
-                    <AvatarFallback>{{ authStore.userName }}</AvatarFallback>
-                    <AvatarImage v-if="authStore.userImageUrl" :src="authStore.userImageUrl"
-                      :alt="authStore.userName" />
-                  </AvatarRoot>
-                  <AccountDropdown :open="profileOpen" class="absolute right-0 top-full mt-2 origin-top-right"
-                    boxClass="absolute right-0 top-0 -mr-0.5 -mt-0.5" />
-                </div>
-              </div>
-            </div>
             <EmailVerificationBanner
               v-if="authStore.isAuthenticated && !authStore.isEmailVerified"
               class="mb-4"