From 5f70b6eee711f9e21a67458f3025b886a42403d2 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 24 Aug 2026 08:45:48 -0700
Subject: [PATCH] Fix navbar button alignment + hover consistency

---
 .../app-frame/app-frame.component.html        |  2 +-
 .../app-frame/app-frame.component.scss        | 33 +++++++++++--------
 .../toasts-dropdown.component.html            |  4 +--
 .../toasts-dropdown.component.scss            | 26 ---------------
 .../components/chat/chat/chat.component.html  |  4 +--
 5 files changed, 24 insertions(+), 45 deletions(-)

diff --git a/src-ui/src/app/components/app-frame/app-frame.component.html b/src-ui/src/app/components/app-frame/app-frame.component.html
index 273feaab2..9c1401241 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.html
+++ b/src-ui/src/app/components/app-frame/app-frame.component.html
@@ -41,7 +41,7 @@
     }
     <pngx-toasts-dropdown></pngx-toasts-dropdown>
     <li ngbDropdown class="nav-item dropdown">
-      <button class="btn border-0" id="userDropdown" ngbDropdownToggle aria-label="User menu" i18n-aria-label>
+      <button class="btn navbar-action border-0" id="userDropdown" ngbDropdownToggle aria-label="User menu" i18n-aria-label>
         <i-bs width="1.3em" height="1.3em" name="person-circle"></i-bs>
         <span class="small ms-2 d-none d-sm-inline">
           {{this.settingsService.displayName}}
diff --git a/src-ui/src/app/components/app-frame/app-frame.component.scss b/src-ui/src/app/components/app-frame/app-frame.component.scss
index 47507da6f..12bb80bf3 100644
--- a/src-ui/src/app/components/app-frame/app-frame.component.scss
+++ b/src-ui/src/app/components/app-frame/app-frame.component.scss
@@ -415,21 +415,21 @@ main {
   align-items: center;
   gap: .125rem;
   padding-right: .5rem;
+}
 
-  .btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 2.5rem;
-    min-height: 2.5rem;
-    padding: .45rem .55rem;
-    border-radius: .6rem;
-    transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
+:host ::ng-deep .navbar-action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: .45rem .55rem;
+  border-radius: .6rem;
+  transition: background-color .15s ease-in-out, opacity .15s ease-in-out;
 
-    &:hover,
-    &:focus-visible {
-      background-color: rgba(0, 0, 0, .14);
-    }
+  &:hover,
+  &:focus-visible {
+    background-color: rgba(0, 0, 0, .14);
   }
 }
 
@@ -492,8 +492,13 @@ main {
     padding-right: .25rem;
   }
 
-  #userDropdown {
+  :host ::ng-deep .navbar-action {
     min-width: 2.25rem;
+    padding-right: .4rem;
+    padding-left: .4rem;
+  }
+
+  #userDropdown {
     padding-right: .35rem;
     padding-left: .45rem;
   }
diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
index 26cee7024..1840d6453 100644
--- a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
+++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.html
@@ -1,9 +1,9 @@
 
-<li ngbDropdown class="nav-item mx-1 position-relative" (openChange)="onOpenChange($event)">
+<li ngbDropdown class="nav-item position-relative" (openChange)="onOpenChange($event)">
   @if (toasts().length) {
     <span class="notification-count badge rounded-pill z-3 pe-none bg-secondary position-absolute">{{ toasts().length }}</span>
   }
-  <button class="btn border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
+  <button class="btn navbar-action border-0" id="notificationsDropdown" ngbDropdownToggle aria-label="Notifications" i18n-aria-label>
     <i-bs width="1.3em" height="1.3em" name="bell"></i-bs>
   </button>
   <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="notificationsDropdown">
diff --git a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss
index e1be70b97..71bd9a6ff 100644
--- a/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss
+++ b/src-ui/src/app/components/app-frame/toasts-dropdown/toasts-dropdown.component.scss
@@ -21,37 +21,11 @@
   line-height: 1;
 }
 
-.nav-item > .btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 2.5rem;
-  min-height: 2.5rem;
-  padding: .45rem .55rem;
-  border-radius: .6rem;
-
-  &:hover,
-  &:focus-visible {
-    background-color: rgba(0, 0, 0, .14);
-  }
-}
-
 .dropdown-item {
   white-space: initial;
 }
 
 @media screen and (max-width: 400px) {
-  .nav-item {
-    margin-right: 0 !important;
-    margin-left: 0 !important;
-  }
-
-  .nav-item > .btn {
-    min-width: 2.25rem;
-    padding-right: .4rem;
-    padding-left: .4rem;
-  }
-
   :host ::ng-deep .dropdown-menu-end {
     right: -3rem;
   }
diff --git a/src-ui/src/app/components/chat/chat/chat.component.html b/src-ui/src/app/components/chat/chat/chat.component.html
index bcc3c2161..d8136fbaf 100644
--- a/src-ui/src/app/components/chat/chat/chat.component.html
+++ b/src-ui/src/app/components/chat/chat/chat.component.html
@@ -1,6 +1,6 @@
 
-<li ngbDropdown class="nav-item me-n2" (openChange)="onOpenChange($event)">
-  <button class="btn border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
+<li ngbDropdown class="nav-item" (openChange)="onOpenChange($event)">
+  <button class="btn navbar-action border-0" id="chatDropdown" ngbDropdownToggle aria-label="Chat" i18n-aria-label>
     <i-bs width="1.3em" height="1.3em" name="chatSquareDots"></i-bs>
   </button>
   <div ngbDropdownMenu class="dropdown-menu-end shadow p-3" aria-labelledby="chatDropdown">