From dc886fed468dbb5b917442c8420c8c9b871c694e Mon Sep 17 00:00:00 2001
From: "bert.hausmans" <bert@hausmans.nl>
Date: Thu, 16 Apr 2026 03:14:01 +0200
Subject: [PATCH] fix: impersonation banner still overlapping navbar

The previous :deep() overrides had equal specificity to Vuexy's
unscoped styles in VerticalNavLayout.vue. Since child component
styles are injected after parent styles, Vuexy's inset-block-start: 0
won by source order. Add !important and simplify the navbar selector
to target .layout-navbar directly.

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

diff --git a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
index 01c730be..970cc62f 100644
--- a/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
+++ b/apps/app/src/layouts/components/DefaultLayoutWithVerticalNav.vue
@@ -101,13 +101,18 @@ import { VerticalNavLayout } from '@layouts'
 </template>
 
 <style scoped>
-/* Push sidebar, navbar, and content below the fixed 48px impersonation banner */
+/*
+ * 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;
-  block-size: calc(100% - 48px);
+  inset-block-start: 48px !important;
+  block-size: calc(100% - 48px) !important;
 }
 
-.impersonation-active :deep(.layout-navbar-sticky .layout-navbar) {
-  inset-block-start: 48px;
+.impersonation-active :deep(.layout-navbar) {
+  inset-block-start: 48px !important;
 }
 </style>