From f7893d9507986c378f913892c0f830ac7212aa25 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Fri, 16 Jan 2026 17:45:18 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix:=20Update=20Z-index=20values?=
 =?UTF-8?q?=20for=20Navigation=20and=20Mask=20layers=20(#11375)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 🔧 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.
---
 .../components/Conversations/ConvoOptions/ConvoOptions.tsx    | 2 +-
 client/src/components/Nav/AccountSettings.tsx                 | 2 +-
 client/src/components/Nav/Bookmarks/BookmarkNav.tsx           | 1 +
 client/src/components/Nav/Favorites/FavoriteItem.tsx          | 1 +
 client/src/components/Nav/Nav.tsx                             | 2 +-
 client/src/mobile.css                                         | 4 ++--
 6 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx b/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
index 14c6b424b4..2ad167a80c 100644
--- a/client/src/components/Conversations/ConvoOptions/ConvoOptions.tsx
+++ b/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
diff --git a/client/src/components/Nav/AccountSettings.tsx b/client/src/components/Nav/AccountSettings.tsx
index d166aaaaee..f35c8ea0fb 100644
--- a/client/src/components/Nav/AccountSettings.tsx
+++ b/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',
diff --git a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx b/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
index 2be884337d..82ed36910f 100644
--- a/client/src/components/Nav/Bookmarks/BookmarkNav.tsx
+++ b/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}
diff --git a/client/src/components/Nav/Favorites/FavoriteItem.tsx b/client/src/components/Nav/Favorites/FavoriteItem.tsx
index e758b8cd5d..5f09354def 100644
--- a/client/src/components/Nav/Favorites/FavoriteItem.tsx
+++ b/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(
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 381f70dc20..74883b94f4 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/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={{
diff --git a/client/src/mobile.css b/client/src/mobile.css
index ce9afee971..da0058492e 100644
--- a/client/src/mobile.css
+++ b/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;