From d209504292f27421daee5e73895cb1ba0285a1fb Mon Sep 17 00:00:00 2001
From: Arthur Belleville <arthur.belleville@datadoghq.com>
Date: Fri, 3 Apr 2026 08:24:37 +0200
Subject: [PATCH] fix: reduce mobile sidebar width from w-48 to w-40 and always
 show expanded on mobile overlay

On mobile, the sidebar was 192px wide (w-48) and could appear collapsed (icons-only)
depending on prior desktop state. This introduces effectivelyCollapsed to always force
expanded mode when the mobile overlay is open, and uses a narrower w-40 (160px) width
to reduce screen coverage on small devices like iPhone SE (375px).

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
---
 apps/main/src/components/NavigationBar.tsx | 31 +++++++++++++---------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/apps/main/src/components/NavigationBar.tsx b/apps/main/src/components/NavigationBar.tsx
index 70a72d9..1195355 100644
--- a/apps/main/src/components/NavigationBar.tsx
+++ b/apps/main/src/components/NavigationBar.tsx
@@ -284,7 +284,10 @@ export function UserMenuPopover({ isCollapsed }: { isCollapsed: boolean }) {
 
 export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean }) => {
   const isCollapsable = !isMobileMenuOpen;
-  const [isCollapsed, setIsCollapsed] = useState(!isCollapsable);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  // On mobile overlay, always show expanded (never collapsed)
+  const effectivelyCollapsed = isMobileMenuOpen ? false : isCollapsed;
 
   return (
     <nav
@@ -292,7 +295,11 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
       className={twMerge(
         "group isolate flex flex-col overflow-y-auto overflow-x-hidden bg-navbar-background transition-all duration-300",
         "h-full md:h-screen",
-        isCollapsed ? "w-16" : "w-48",
+        isMobileMenuOpen
+          ? "w-40"
+          : effectivelyCollapsed
+            ? "w-16"
+            : "w-48",
         "md:flex",
         // On mobile in standalone mode, respect safe area insets
         "pl-[env(safe-area-inset-left,0px)] pt-[env(safe-area-inset-top,0px)] pb-[env(safe-area-inset-bottom,0px)]"
@@ -303,19 +310,19 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
           to="/"
           className={twMerge(
             "flex flex-col items-center gap-2 w-full",
-            isCollapsed ? "justify-center" : ""
+            effectivelyCollapsed ? "justify-center" : ""
           )}
           aria-label="Home"
         >
           <img
             src={getXtabloIcon()}
             alt="Logo XTablo"
-            className={twMerge(isCollapsed ? "w-8 h-8" : "w-16 h-16", "rounded-lg")}
+            className={twMerge(effectivelyCollapsed ? "w-8 h-8" : "w-16 h-16", "rounded-lg")}
           />
           <h1
             className={twMerge(
               "text-lg font-bold transition-all duration-300 text-gray-900 dark:text-white whitespace-nowrap",
-              isCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
+              effectivelyCollapsed ? "w-0 h-0 opacity-0" : "w-auto opacity-100"
             )}
           >
             XTablo {isProd ? "" : isStaging ? "Staging" : "Dev"}
@@ -326,10 +333,10 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
             variant="ghost"
             size="icon"
             onClick={() => setIsCollapsed(!isCollapsed)}
-            aria-label={isCollapsed ? "Expand navigation" : "Collapse navigation"}
-            aria-expanded={!isCollapsed}
+            aria-label={effectivelyCollapsed ? "Expand navigation" : "Collapse navigation"}
+            aria-expanded={!effectivelyCollapsed}
             className={twMerge(
-              isCollapsed ? "relative" : "absolute top-2 right-2",
+              effectivelyCollapsed ? "relative" : "absolute top-2 right-2",
               "size-5 p-1",
               "text-gray-500 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white",
               "transition-all duration-300",
@@ -339,18 +346,18 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
               "hover:scale-110"
             )}
           >
-            {isCollapsed ? <PlusIcon aria-hidden="true" /> : <MinusIcon aria-hidden="true" />}
+            {effectivelyCollapsed ? <PlusIcon aria-hidden="true" /> : <MinusIcon aria-hidden="true" />}
           </Button>
         )}
       </div>
-      <MainNavigation isCollapsed={isCollapsed} />
+      <MainNavigation isCollapsed={effectivelyCollapsed} />
       <div
         className={twMerge(
           "bg-navbar-background flex flex-col px-1 pb-1.5 w-full mt-auto gap-1",
-          isCollapsed ? "pl-2.5 pr-3.5" : ""
+          effectivelyCollapsed ? "pl-2.5 pr-3.5" : ""
         )}
       >
-        <UserMenuPopover isCollapsed={isCollapsed} />
+        <UserMenuPopover isCollapsed={effectivelyCollapsed} />
       </div>
     </nav>
   );