From 50376171313b9fa9d0936ae187639a47ddab1783 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sun, 18 Jan 2026 11:59:26 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20fix:=20Layering=20for=20Right-ha?=
 =?UTF-8?q?nd=20Side=20Panel=20(#11392)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Updated the background color in mobile.css for improved visibility.
* Refactored class names in SidePanelGroup.tsx to utilize a utility function for better consistency and maintainability.
---
 client/src/components/SidePanel/SidePanelGroup.tsx | 6 +++---
 client/src/mobile.css                              | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/src/components/SidePanel/SidePanelGroup.tsx b/client/src/components/SidePanel/SidePanelGroup.tsx
index 14473127b5..171947cd6b 100644
--- a/client/src/components/SidePanel/SidePanelGroup.tsx
+++ b/client/src/components/SidePanel/SidePanelGroup.tsx
@@ -6,7 +6,7 @@ import { ResizablePanel, ResizablePanelGroup, useMediaQuery } from '@librechat/c
 import type { ImperativePanelHandle } from 'react-resizable-panels';
 import { useGetStartupConfig } from '~/data-provider';
 import ArtifactsPanel from './ArtifactsPanel';
-import { normalizeLayout } from '~/utils';
+import { normalizeLayout, cn } from '~/utils';
 import SidePanel from './SidePanel';
 import store from '~/store';
 
@@ -149,9 +149,9 @@ const SidePanelGroup = memo(
         )}
         {!hideSidePanel && interfaceConfig.sidePanel === true && (
           <button
-            aria-label="Close right side panel"
-            className={`nav-mask ${!isCollapsed ? 'active' : ''}`}
             onClick={handleClosePanel}
+            aria-label="Close right side panel"
+            className={cn('sidenav-mask', !isCollapsed ? 'active' : '')}
           />
         )}
       </>
diff --git a/client/src/mobile.css b/client/src/mobile.css
index da0058492e..20eeb5d1da 100644
--- a/client/src/mobile.css
+++ b/client/src/mobile.css
@@ -153,7 +153,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    background-color: rgba(86, 88, 105, 0.75);
+    background-color: rgba(7, 7, 7, 0.4);
     padding-left: 420px;
     padding-top: 12px;
     opacity: 0;