From 5d09fa0bcdf21533726d21db6477c0ea1e929705 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 8 Oct 2024 10:15:09 -0700
Subject: [PATCH 1/2] Reintroduce missing styles to `Header.vue`

21050a369509eb5964df723ac20c4899c16e7aca migrated styles used by `Header.vue` into 'HeaderPageActionMenu.vue`, when these styles should have remained in `Header.vue`.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/nav/Header.vue | 50 +++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/shell/components/nav/Header.vue b/shell/components/nav/Header.vue
index 8440b6e8fb..0e2c06f613 100644
--- a/shell/components/nav/Header.vue
+++ b/shell/components/nav/Header.vue
@@ -1077,4 +1077,54 @@ export default {
     color: var(--secondary);
   }
 
+  .user-menu {
+    :deep(.v-popper__arrow-container) {
+      display: none;
+    }
+
+    :deep(.v-popper__inner) {
+      padding: 10px 0 10px 0;
+    }
+
+    :deep(.v-popper) {
+      display: flex;
+    }
+  }
+
+  .user-menu-item {
+    a, &.no-link > span {
+      cursor: pointer;
+      padding: 0px 10px;
+
+      &:hover {
+        background-color: var(--dropdown-hover-bg);
+        color: var(--dropdown-hover-text);
+        text-decoration: none;
+      }
+
+      // When the menu item is focused, pop the margin and compensate the padding, so that
+      // the focus border appears within the menu
+      &:focus {
+        margin: 0 2px;
+        padding: 10px 8px;
+      }
+    }
+
+    &.no-link > span {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px;
+      color: var(--link);
+    }
+
+    div.menu-separator {
+      cursor: default;
+      padding: 4px 0;
+
+      .menu-separator-line {
+        background-color: var(--border);
+        height: 1px;
+      }
+    }
+  }
 </style>

From 1d58406933bd43f92fd7822297c484a6be8453a6 Mon Sep 17 00:00:00 2001
From: Phillip Rak <rak.phillip@gmail.com>
Date: Tue, 8 Oct 2024 10:37:54 -0700
Subject: [PATCH 2/2] Override popper content in `HeaderPageActionMenu.vue`

This creates a container for popper content so that styles can be easily overridden via deep selectors.

Signed-off-by: Phillip Rak <rak.phillip@gmail.com>
---
 shell/components/nav/HeaderPageActionMenu.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/shell/components/nav/HeaderPageActionMenu.vue b/shell/components/nav/HeaderPageActionMenu.vue
index d9e67283d4..0ab6aa744f 100644
--- a/shell/components/nav/HeaderPageActionMenu.vue
+++ b/shell/components/nav/HeaderPageActionMenu.vue
@@ -36,6 +36,7 @@ const handleBlurEvent = (event: KeyboardEvent) => {
     :flip="false"
     :placement="'bottom-end'"
     :distance="-6"
+    :container="'.page-actions'"
   >
     <i
       data-testid="page-actions-menu"
@@ -75,10 +76,13 @@ const handleBlurEvent = (event: KeyboardEvent) => {
       </div>
     </template>
   </v-dropdown>
+  <div class="page-actions">
+    <!--Empty container for mounting popper content-->
+  </div>
 </template>
 
 <style lang="scss" scoped>
-  .v-popper__popper {
+  .page-actions :deep(.v-popper__popper) {
     .v-popper__wrapper {
       .v-popper__arrow-container {
         display: none;