From 89645eab604a127b093e16fff31a242d679bb81f Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 02:58:27 +0200
Subject: [PATCH] fix: impersonation banner overlapping sidebar and navbar

The previous paddingTop on a wrapper div didn't affect the Vuexy
layout's fixed-position sidebar or sticky navbar. Replace with
scoped :deep() CSS overrides that shift both elements down 48px
when impersonation is active.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../DefaultLayoutWithVerticalNav.vue          | 92 +++++++++++--------
 1 file changed, 52 insertions(+), 40 deletions(-)

diff --git a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index 48fb1c65..01c730be 100644
--- a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -49,53 +49,65 @@ import { VerticalNavLayout } from '@layouts'
 </script>
 
 <template>
-  <div :style="{ paddingTop: impersonationStore.isImpersonating ? '48px' : '0' }">
-  <VerticalNavLayout :nav-items="navItems">
-    <!-- 👉 Organisation switcher -->
-    <template #before-vertical-nav-items>
-      <OrganisationSwitcher />
-      <div class="vertical-nav-items-shadow" />
-    </template>
+  <div :class="{ 'impersonation-active': impersonationStore.isImpersonating }">
+    <VerticalNavLayout :nav-items="navItems">
+      <!-- 👉 Organisation switcher -->
+      <template #before-vertical-nav-items>
+        <OrganisationSwitcher />
+        <div class="vertical-nav-items-shadow" />
+      </template>
 
-    <!-- 👉 navbar (match Vuexy full-version: search + actions; search flex-grows) -->
-    <template #navbar="{ toggleVerticalOverlayNavActive }">
-      <div
-        class="d-flex h-100 align-center w-100"
-        style="min-inline-size: 0;"
-      >
-        <IconBtn
-          id="vertical-nav-toggle-btn"
-          class="ms-n3 d-lg-none flex-shrink-0"
-          @click="toggleVerticalOverlayNavActive(true)"
+      <!-- 👉 navbar (match Vuexy full-version: search + actions; search flex-grows) -->
+      <template #navbar="{ toggleVerticalOverlayNavActive }">
+        <div
+          class="d-flex h-100 align-center w-100"
+          style="min-inline-size: 0;"
         >
-          <VIcon
-            size="26"
-            icon="tabler-menu-2"
-          />
-        </IconBtn>
+          <IconBtn
+            id="vertical-nav-toggle-btn"
+            class="ms-n3 d-lg-none flex-shrink-0"
+            @click="toggleVerticalOverlayNavActive(true)"
+          >
+            <VIcon
+              size="26"
+              icon="tabler-menu-2"
+            />
+          </IconBtn>
 
-        <NavSearchBar class="flex-grow-1 ms-lg-n3 min-w-0" />
+          <NavSearchBar class="flex-grow-1 ms-lg-n3 min-w-0" />
 
-        <NavbarThemeSwitcher class="flex-shrink-0 me-2" />
-        <NavbarShortcuts class="flex-shrink-0" />
-        <NavBarNotifications class="flex-shrink-0 me-1" />
-        <UserProfile class="flex-shrink-0" />
-      </div>
-    </template>
+          <NavbarThemeSwitcher class="flex-shrink-0 me-2" />
+          <NavbarShortcuts class="flex-shrink-0" />
+          <NavBarNotifications class="flex-shrink-0 me-1" />
+          <UserProfile class="flex-shrink-0" />
+        </div>
+      </template>
 
-    <!-- 👉 Impersonation Banner -->
-    <ImpersonationBanner />
+      <!-- 👉 Impersonation Banner -->
+      <ImpersonationBanner />
 
-    <!-- 👉 Pages -->
-    <slot />
+      <!-- 👉 Pages -->
+      <slot />
 
-    <!-- 👉 Footer -->
-    <template #footer>
-      <Footer />
-    </template>
+      <!-- 👉 Footer -->
+      <template #footer>
+        <Footer />
+      </template>
 
-    <!-- 👉 Customizer -->
-    <!-- <TheCustomizer /> -->
-  </VerticalNavLayout>
+      <!-- 👉 Customizer -->
+      <!-- <TheCustomizer /> -->
+    </VerticalNavLayout>
   </div>
 </template>
+
+<style scoped>
+/* Push sidebar, navbar, and content below the fixed 48px impersonation banner */
+.impersonation-active :deep(.layout-vertical-nav) {
+  inset-block-start: 48px;
+  block-size: calc(100% - 48px);
+}
+
+.impersonation-active :deep(.layout-navbar-sticky .layout-navbar) {
+  inset-block-start: 48px;
+}
+</style>