🔧 fix: Update Z-index values for Navigation and Mask layers (#11375)

* 🔧 fix: Update z-index values for navigation and mask layers in mobile view

- Increased z-index of the .nav-mask class from 63 to 105 for improved layering.
- Updated z-index of the nav component from 70 to 110 to ensure it appears above other elements.

* 🔧 fix: Adjust z-index for navigation component in mobile view

- Updated the z-index of the .nav class from 64 to 110 to ensure proper layering above other elements.

* 🔧 fix: Standardize z-index values across conversation and navigation components

- Updated z-index to 125 for various components including ConvoOptions, AccountSettings, BookmarkNav, and FavoriteItem to ensure consistent layering and visibility across the application.

client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx

@@ -294,6 +294,7 @@ function ConvoOptions({
         portal={true}
         menuId={menuId}
         focusLoop={true}
+        className="z-[125]"
         unmountOnHide={true}
         isOpen={isPopoverActive}
         setIsOpen={setIsPopoverActive}
@@ -321,7 +322,6 @@ function ConvoOptions({
           </Ariakit.MenuButton>
         }
         items={dropdownItems}
-        className="z-30"
       />
       {showShareDialog && (
         <ShareButton

client/src/components/Nav/AccountSettings.tsx

@@ -40,7 +40,7 @@ function AccountSettings() {
         </div>
       </Select.Select>
       <Select.SelectPopover
-        className="popover-ui w-[305px] rounded-lg md:w-[244px]"
+        className="popover-ui z-[125] w-[305px] rounded-lg md:w-[244px]"
         style={{
           transformOrigin: 'bottom',
           translate: '0 -4px',

client/src/components/Nav/Bookmarks/BookmarkNav.tsx

@@ -89,6 +89,7 @@ const BookmarkNav: FC<BookmarkNavProps> = ({ tags, setTags }: BookmarkNavProps)
       unmountOnHide={true}
       setIsOpen={setIsMenuOpen}
       keyPrefix="bookmark-nav-"
+      className="z-[125]"
       trigger={
         <TooltipAnchor
           description={label}

client/src/components/Nav/Favorites/FavoriteItem.tsx

@@ -136,6 +136,7 @@ export default function FavoriteItem({
           mountByState={true}
           isOpen={isPopoverActive}
           setIsOpen={setIsPopoverActive}
+          className="z-[125]"
           trigger={
             <Menu.MenuButton
               className={cn(

client/src/components/Nav/Nav.tsx

@@ -262,7 +262,7 @@ const Nav = memo(
           <div
             data-testid="nav"
             className={cn(
-              'nav fixed left-0 top-0 z-[70] h-full bg-surface-primary-alt',
+              'nav fixed left-0 top-0 z-[110] h-full bg-surface-primary-alt',
               navVisible && 'active',
             )}
             style={{

client/src/mobile.css

@@ -9,7 +9,7 @@
 
 .nav {
   position: fixed;
-  z-index: 64;
+  z-index: 110;
   top: 0;
 
   /* max-width: 260px; */
@@ -36,7 +36,7 @@
   }
   .nav-mask {
     position: fixed;
-    z-index: 63;
+    z-index: 105;
     left: 0;
     right: 0;
     top: 0;