From cf2ff5d85f0745b9f89e4dc4238530840c61317c Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Tue, 17 Mar 2026 16:26:15 -0400
Subject: [PATCH] [CL-1088] only apply macOS extra top padding to nav logo in
 overlay mode (#19418)

* fix(uif): only apply macOS extra top padding to nav logo in overlay mode

The macOS extra top padding was unconditionally applied to the nav logo.
Now it only applies when the side nav is in overlay mode (open but not push mode).
---
 apps/desktop/src/scss/environment.scss              |  8 ++++++--
 apps/desktop/src/scss/header.scss                   |  4 ++--
 .../src/navigation/nav-logo.component.html          | 13 +++++++------
 .../components/src/navigation/nav-logo.component.ts |  3 ++-
 4 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/apps/desktop/src/scss/environment.scss b/apps/desktop/src/scss/environment.scss
index e6ea95ef17e..e000927ea88 100644
--- a/apps/desktop/src/scss/environment.scss
+++ b/apps/desktop/src/scss/environment.scss
@@ -1,4 +1,8 @@
-html.os_macos {
+:root {
+  --header-height: 54px;
+}
+
+html.os_macos {
   .vault .header-search {
     -webkit-app-region: drag;
 
@@ -12,7 +16,7 @@
     padding-top: 0;
   }
 
-  --bit-sidenav-macos-extra-top-padding: 28px;
+  --bit-sidenav-extra-top-padding: var(--header-height);
 }
 
 .environment-selector-btn {
diff --git a/apps/desktop/src/scss/header.scss b/apps/desktop/src/scss/header.scss
index e4677d74dfe..6555b2750dd 100644
--- a/apps/desktop/src/scss/header.scss
+++ b/apps/desktop/src/scss/header.scss
@@ -1,7 +1,7 @@
 .header {
   -webkit-app-region: drag;
-  min-height: 54px;
-  max-height: 54px;
+  min-height: var(--header-height);
+  max-height: var(--header-height);
   display: grid;
   grid-template-columns: 25% 1fr 25%;
   grid-column-gap: 5px;
diff --git a/libs/components/src/navigation/nav-logo.component.html b/libs/components/src/navigation/nav-logo.component.html
index 07f46f18038..44183c8d7a6 100644
--- a/libs/components/src/navigation/nav-logo.component.html
+++ b/libs/components/src/navigation/nav-logo.component.html
@@ -1,10 +1,11 @@
 <div
-  class="tw-px-2 tw-pt-[calc(0.5rem_+_var(--bit-sidenav-macos-extra-top-padding,_0px))] tw-bg-bg-sidenav"
-  [class]="
-    sideNavService.open()
-      ? 'tw-sticky tw-top-0 tw-z-50 tw-pb-4'
-      : 'tw-pb-[calc(theme(spacing.8)_+_2px)]'
-  "
+  class="tw-px-2 tw-bg-bg-sidenav"
+  [ngClass]="{
+    'tw-sticky tw-top-0 tw-z-50 tw-pb-4': sideNavService.open(),
+    'tw-pb-[calc(theme(spacing.8)_+_2px)]': !sideNavService.open(),
+    'tw-pt-[calc(0.5rem_+_var(--bit-sidenav-extra-top-padding,_0px))]': sideNavService.isOverlay(),
+    'tw-pt-2': !sideNavService.isOverlay(),
+  }"
 >
   <!-- absolutely position the link svg to avoid shifting layout when sidenav is closed -->
   <a
diff --git a/libs/components/src/navigation/nav-logo.component.ts b/libs/components/src/navigation/nav-logo.component.ts
index 6e802235b2a..63366843882 100644
--- a/libs/components/src/navigation/nav-logo.component.ts
+++ b/libs/components/src/navigation/nav-logo.component.ts
@@ -1,3 +1,4 @@
+import { NgClass } from "@angular/common";
 import { ChangeDetectionStrategy, Component, input, inject } from "@angular/core";
 import { RouterLinkActive, RouterLink } from "@angular/router";
 
@@ -10,7 +11,7 @@ import { SideNavService } from "./side-nav.service";
 @Component({
   selector: "bit-nav-logo",
   templateUrl: "./nav-logo.component.html",
-  imports: [RouterLinkActive, RouterLink, SvgComponent],
+  imports: [NgClass, RouterLinkActive, RouterLink, SvgComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: "tw-contents" },
 })