fix(webapp): z-index of header dropdown menu

JoosepAlviste · Oct 4, 2023 · a8fa614 · a8fa614
1 parent da67051
commit a8fa614
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/apps/webapp/src/components/Header/Header.tsx b/apps/webapp/src/components/Header/Header.tsx
@@ -4,6 +4,7 @@ import React, { useState } from 'react'
 
 import { useAuthenticatedUser } from '#/features/auth'
 import { Search } from '#/features/search'
+import { zIndex } from '#/styles/theme.css'
 
 import { Button } from '../Button'
 import { Icon } from '../Icon'
@@ -52,7 +53,10 @@ export const Header = ({ className }: HeaderProps) => {
             </DropdownMenu.Trigger>
 
             <DropdownMenu.Portal>
-              <DropdownMenu.Content className={s.dropdownContent}>
+              <DropdownMenu.Content
+                className={s.dropdownContent}
+                style={{ zIndex: zIndex.layout.dropdownMenu }}
+              >
                 <DropdownMenu.Item onSelect={logOut} className={s.dropdownItem}>
                   Log out
                 </DropdownMenu.Item>

diff --git a/apps/webapp/src/styles/theme.css.ts b/apps/webapp/src/styles/theme.css.ts
@@ -207,6 +207,7 @@ const below = -1
 const zLayoutHeader = above + base
 const zLayoutToast = above + zLayoutHeader
 const zLayoutSelect = above + zLayoutHeader
+const zLayoutDropdownMenu = above + zLayoutHeader
 const zHomePageBackground = below + below + base
 const zAuthLayoutSeparator = base
 const zSearchPopover = above + zLayoutHeader
@@ -216,6 +217,7 @@ export const zIndex = {
     header: zLayoutHeader,
     toast: zLayoutToast,
     select: zLayoutSelect,
+    dropdownMenu: zLayoutDropdownMenu,
   },
   homePage: {
     background: zHomePageBackground,