Update z index for action menu dropdowns (#2522)

Co-authored-by: David Crespo <[email protected]>

Author: charliepark

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

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 ? (

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;

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',