From 0221e7f6d31e06207ebb4a41c12db681e484cb9b Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 03:17:13 +0200
Subject: [PATCH] fix: move impersonation banner inside layout content flow

Replace position:fixed VSystemBar + fragile :deep() CSS overrides
with a normal-flow div inside the Vuexy content area. The banner
renders in VerticalNavLayout's default slot (layout-page-content)
so it sits naturally below the navbar without fighting the layout
system. Sidebar and navbar are no longer affected.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../platform/ImpersonationBanner.vue          | 24 ++---
 .../DefaultLayoutWithVerticalNav.vue          | 97 ++++++++-----------
 2 files changed, 52 insertions(+), 69 deletions(-)

diff --git a/apps/app/src/components/platform/ImpersonationBanner.vue b/apps/app/src/components/platform/ImpersonationBanner.vue
index 1fecb19e..64ae5d24 100644
--- a/apps/app/src/components/platform/ImpersonationBanner.vue
+++ b/apps/app/src/components/platform/ImpersonationBanner.vue
@@ -62,12 +62,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VSystemBar
+  <div
     v-if="impersonationStore.isImpersonating"
-    color="warning"
-    height="48"
-    style="z-index: 9999; position: fixed; top: 0; left: 0; right: 0;"
-    class="px-4"
+    class="impersonation-banner d-flex align-center px-4"
   >
     <VIcon
       icon="tabler-user-search"
@@ -93,15 +90,20 @@ onUnmounted(() => {
       variant="elevated"
       color="white"
       class="text-warning"
+      prepend-icon="tabler-arrow-back"
       :loading="isStopping"
       @click="handleStop"
     >
-      <VIcon
-        icon="tabler-arrow-back"
-        size="16"
-        class="me-1"
-      />
       Terug naar admin
     </VBtn>
-  </VSystemBar>
+  </div>
 </template>
+
+<style scoped>
+.impersonation-banner {
+  background: rgb(var(--v-theme-warning));
+  color: rgb(var(--v-theme-on-warning));
+  block-size: 48px;
+  inline-size: 100%;
+}
+</style>
diff --git a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index 970cc62f..bfdc9934 100644
--- a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -49,70 +49,51 @@ import { VerticalNavLayout } from '@layouts'
 </script>
 
 <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>
+  <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;"
+    <!-- 👉 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)"
         >
-          <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>
+          <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>
-  </div>
+    <!-- 👉 Customizer -->
+    <!-- <TheCustomizer /> -->
+  </VerticalNavLayout>
 </template>
-
-<style scoped>
-/*
- * Push sidebar, navbar, and content below the fixed 48px impersonation banner.
- * !important is needed because VerticalNavLayout's unscoped styles are injected
- * after this component's scoped styles (child renders after parent), so equal-
- * specificity rules from Vuexy win without it.
- */
-.impersonation-active :deep(.layout-vertical-nav) {
-  inset-block-start: 48px !important;
-  block-size: calc(100% - 48px) !important;
-}
-
-.impersonation-active :deep(.layout-navbar) {
-  inset-block-start: 48px !important;
-}
-</style>