improvement(sidebar): allow dragging the sidebar slightly narrower than the default

Author: waleedlatif1

apps/sim/app/layout.tsx

@@ -120,7 +120,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                 }
 
                 // Sidebar width. Mirror getMaxSidebarWidth() in stores/sidebar/store.ts:
-                // 30% of the viewport capped at 400px, and never below the 256px
+                // 30% of the viewport capped at 400px, and never below the 224px
                 // minimum, so a narrow window yields a width >= MIN instead of a
                 // sub-minimum sliver.
                 var defaultSidebarWidth = 256;
@@ -149,10 +149,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   // collapsed, because the desktop hover-peek renders the sidebar at
                   // its restore width while --sidebar-width still reads collapsed.
                   var width = state && state.sidebarWidth;
-                  var maxSidebarWidth = Math.max(256, Math.min(400, window.innerWidth * 0.3));
+                  var maxSidebarWidth = Math.max(224, Math.min(400, window.innerWidth * 0.3));
                   var expandedWidth =
                     typeof width === 'number' && isFinite(width)
-                      ? Math.min(Math.max(width, 256), maxSidebarWidth)
+                      ? Math.min(Math.max(width, 224), maxSidebarWidth)
                       : defaultSidebarWidth;
                   document.documentElement.style.setProperty(
                     '--sidebar-expanded-width',

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/avatars/avatars.tsx

@@ -33,10 +33,10 @@ export function Avatars({ workflowId }: AvatarsProps) {
 
   /**
    * Scale the max visible avatars between MIN_COUNT and MAX_COUNT as the sidebar
-   * widens.
+   * widens past its default width.
    */
   const maxVisible = useMemo(() => {
-    const widthDelta = sidebarWidth - SIDEBAR_WIDTH.MIN
+    const widthDelta = sidebarWidth - SIDEBAR_WIDTH.DEFAULT
     const additionalAvatars = Math.floor(widthDelta / AVATAR_CONFIG.WIDTH_PER_AVATAR)
     const calculated = AVATAR_CONFIG.MIN_COUNT + additionalAvatars
     return Math.max(AVATAR_CONFIG.MIN_COUNT, Math.min(AVATAR_CONFIG.MAX_COUNT, calculated))

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx

@@ -824,7 +824,7 @@ export const Sidebar = memo(function Sidebar() {
 
   const handleOpenSettings = (section: SettingsSection) => {
     if (!isCollapsedRef.current) {
-      setSidebarWidth(SIDEBAR_WIDTH.MIN)
+      setSidebarWidth(SIDEBAR_WIDTH.DEFAULT)
     }
     navigateToSettings({ section })
   }
@@ -898,7 +898,7 @@ export const Sidebar = memo(function Sidebar() {
   const navigateToPage = useCallback(
     (path: string) => {
       if (!isCollapsedRef.current) {
-        setSidebarWidth(SIDEBAR_WIDTH.MIN)
+        setSidebarWidth(SIDEBAR_WIDTH.DEFAULT)
       }
       router.push(path)
     },

apps/sim/stores/constants.ts

@@ -29,7 +29,8 @@ export const CONTENT_WINDOW_GAP = 0
 /** Sidebar width constraints */
 export const SIDEBAR_WIDTH = {
   DEFAULT: 256,
-  MIN: 256,
+  /** Narrowest the expanded rail can be dragged — slightly under the default */
+  MIN: 224,
   /** Width when sidebar is collapsed to icon-only mode */
   COLLAPSED: 48,
   /**

apps/sim/stores/sidebar/store.test.ts

@@ -54,6 +54,15 @@ describe('sidebar width CSS variables', () => {
     expect(widthVars()).toEqual({ width: '300px', expanded: '300px' })
   })
 
+  it('allows narrowing below the default down to the minimum', () => {
+    useSidebarStore.getState().setSidebarWidth(SIDEBAR_WIDTH.MIN)
+    expect(useSidebarStore.getState().sidebarWidth).toBe(SIDEBAR_WIDTH.MIN)
+    expect(SIDEBAR_WIDTH.MIN).toBeLessThan(SIDEBAR_WIDTH.DEFAULT)
+
+    useSidebarStore.getState().setSidebarWidth(SIDEBAR_WIDTH.MIN - 1)
+    expect(useSidebarStore.getState().sidebarWidth).toBe(SIDEBAR_WIDTH.MIN)
+  })
+
   it('keeps the expanded variable at the restore width while collapsed', () => {
     useSidebarStore.getState().setSidebarWidth(300)
     useSidebarStore.getState().toggleCollapsed()