From c95a78e2614fbf6db7a0f6400769df61a1af5abb Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 28 Oct 2024 14:39:57 -0700
Subject: [PATCH 1/3] Update zIndex to handle bottomBar and action menu
 stacking

---
 app/components/TopBar.tsx                | 2 +-
 app/components/TopBarPicker.tsx          | 2 +-
 app/ui/styles/components/menu-button.css | 2 +-
 tailwind.config.js                       | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 8c33db531e..9a0cf6b1e3 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -55,7 +55,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                 </span>
                 <DirectionDownIcon className="!w-2.5" />
               </DropdownMenu.Trigger>
-              <DropdownMenu.Content gap={8} className="!z-topBarPopover">
+              <DropdownMenu.Content gap={8} className="!z-topBarDropdown">
                 <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
                 <DropdownMenu.Item onSelect={() => logout.mutate({})}>
                   Sign out
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index 17da2c90a5..b3a1c44f48 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -112,7 +112,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
       {/* TODO: popover position should be further right */}
       {props.items && (
         <DropdownMenu.Content
-          className="!z-topBarPopover mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
+          className="!z-topBarDropdown mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
           anchor="bottom start"
         >
           {props.items.length > 0 ? (
diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index 2a88a87233..9ca90e7dc9 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -7,7 +7,7 @@
  */
 
 .DropdownMenuContent {
-  @apply z-popover min-w-36 rounded border p-0 bg-raise border-secondary;
+  @apply z-topBarDropdown min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {
     @apply block w-full cursor-pointer select-none border-b py-2 pl-3 pr-6 text-left text-sans-md text-secondary border-secondary last:border-b-0;
diff --git a/tailwind.config.js b/tailwind.config.js
index be83d8b78e..9868c46e9e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -48,7 +48,7 @@ module.exports = {
         modal: '40',
         sideModalDropdown: '40',
         sideModal: '30',
-        topBarPopover: '25',
+        topBarDropdown: '25',
         topBar: '20',
         popover: '10',
         contentDropdown: '10',

From 6f6c8547f3530f5fe32fde6aa9011bc31bed8555 Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 28 Oct 2024 14:46:44 -0700
Subject: [PATCH 2/3] clean up unnecessary classNames

---
 app/components/TopBar.tsx       | 2 +-
 app/components/TopBarPicker.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/TopBar.tsx b/app/components/TopBar.tsx
index 9a0cf6b1e3..a9024161ca 100644
--- a/app/components/TopBar.tsx
+++ b/app/components/TopBar.tsx
@@ -55,7 +55,7 @@ export function TopBar({ children }: { children: React.ReactNode }) {
                 </span>
                 <DirectionDownIcon className="!w-2.5" />
               </DropdownMenu.Trigger>
-              <DropdownMenu.Content gap={8} className="!z-topBarDropdown">
+              <DropdownMenu.Content gap={8}>
                 <DropdownMenu.LinkItem to={pb.profile()}>Settings</DropdownMenu.LinkItem>
                 <DropdownMenu.Item onSelect={() => logout.mutate({})}>
                   Sign out
diff --git a/app/components/TopBarPicker.tsx b/app/components/TopBarPicker.tsx
index b3a1c44f48..5ae3432948 100644
--- a/app/components/TopBarPicker.tsx
+++ b/app/components/TopBarPicker.tsx
@@ -112,7 +112,7 @@ const TopBarPicker = (props: TopBarPickerProps) => {
       {/* TODO: popover position should be further right */}
       {props.items && (
         <DropdownMenu.Content
-          className="!z-topBarDropdown mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
+          className="mt-2 max-h-80 min-w-[12.8125rem] overflow-y-auto"
           anchor="bottom start"
         >
           {props.items.length > 0 ? (

From 3cc0931d39bed00bc2586bd63d27c40ee2c176aa Mon Sep 17 00:00:00 2001
From: Charlie Park <charlie@oxidecomputer.com>
Date: Mon, 28 Oct 2024 15:19:15 -0700
Subject: [PATCH 3/3] Update app/ui/styles/components/menu-button.css

Co-authored-by: David Crespo <david-crespo@users.noreply.github.com>
---
 app/ui/styles/components/menu-button.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/ui/styles/components/menu-button.css b/app/ui/styles/components/menu-button.css
index 9ca90e7dc9..f80a7be044 100644
--- a/app/ui/styles/components/menu-button.css
+++ b/app/ui/styles/components/menu-button.css
@@ -7,6 +7,7 @@
  */
 
 .DropdownMenuContent {
+  /* we want menu popover to be on top of top bar and pagination bar too */
   @apply z-topBarDropdown min-w-36 rounded border p-0 bg-raise border-secondary;
 
   & .DropdownMenuItem {