Update z index for action menu dropdowns (#2522)

Co-authored-by: David Crespo <[email protected]>
oxidecomputer · Oct 28, 2024 · 3474c6c · 3474c6c
1 parent af6a89e
commit 3474c6c
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git 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}>
                 <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
@@ -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="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
@@ -7,7 +7,8 @@
  */
 
 .DropdownMenuContent {
-  @apply z-popover min-w-36 rounded border p-0 bg-raise border-secondary;
+  /* 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 {
     @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
@@ -48,7 +48,7 @@ module.exports = {
         modal: '40',
         sideModalDropdown: '40',
         sideModal: '30',
-        topBarPopover: '25',
+        topBarDropdown: '25',
         topBar: '20',
         popover: '10',
         contentDropdown: '10',