From ae7457be33c54cc960952fa5f39f12efbe2287d8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Thu, 5 Nov 2026 12:18:26 +0000
Subject: [PATCH] design-audit: share navIconSx for Sidebar's three 40px
 ListItemIcon widths

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WA2AWjuTWyPSsDWXKjTvHs
---
 frontend/src/components/layout/Sidebar.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 524487b8..4765e8b8 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -16,6 +16,9 @@ import { getNavItems } from "./NavConfig";
 
 export const DRAWER_WIDTH = 240;
 
+// Tighter than MUI's 56px default so the drawer icons sit closer to their labels.
+const navIconSx = { minWidth: 40 } as const;
+
 interface SidebarProps {
   mobileOpen: boolean;
   onMobileClose: () => void;
@@ -61,7 +64,7 @@ export function Sidebar({ mobileOpen, onMobileClose, unreadCount }: SidebarProps
                 },
               }}
             >
-              <ListItemIcon sx={{ minWidth: 40 }}>{item.icon}</ListItemIcon>
+              <ListItemIcon sx={navIconSx}>{item.icon}</ListItemIcon>
               <ListItemText
                 primary={item.label}
                 slotProps={{ primary: { sx: { fontWeight: isActive(item.path) ? 700 : 500 } } }}
@@ -77,7 +80,7 @@ export function Sidebar({ mobileOpen, onMobileClose, unreadCount }: SidebarProps
         <List dense>
           <ListItem disablePadding>
             <ListItemButton component={Link} to="/docs" onClick={onMobileClose}>
-              <ListItemIcon sx={{ minWidth: 40 }}>
+              <ListItemIcon sx={navIconSx}>
                 <MenuBook fontSize="small" />
               </ListItemIcon>
               <ListItemText primary="Docs" />
@@ -89,7 +92,7 @@ export function Sidebar({ mobileOpen, onMobileClose, unreadCount }: SidebarProps
 
         {user ? (
           <ListItemButton onClick={onLogout}>
-            <ListItemIcon sx={{ minWidth: 40 }}>
+            <ListItemIcon sx={navIconSx}>
               <Logout fontSize="small" />
             </ListItemIcon>
             <ListItemText primary="Log out" />