From a8fa614957e3f1f42af4f75fd633ed6ae60b130c Mon Sep 17 00:00:00 2001
From: Joosep Alviste <joosep.alviste@gmail.com>
Date: Wed, 4 Oct 2023 19:39:29 +0300
Subject: [PATCH] fix(webapp): z-index of header dropdown menu

---
 apps/webapp/src/components/Header/Header.tsx | 6 +++++-
 apps/webapp/src/styles/theme.css.ts          | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/apps/webapp/src/components/Header/Header.tsx b/apps/webapp/src/components/Header/Header.tsx
index 0cf8b0f8..1fd5d8a7 100644
--- 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
index 4bfe660d..6da933ea 100644
--- 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,