fix(sidebar): clamp the default width fallback to the viewport maximum

Author: waleedlatif1

apps/sim/app/layout.tsx

@@ -153,7 +153,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                   var expandedWidth =
                     typeof width === 'number' && isFinite(width)
                       ? Math.min(Math.max(width, 224), maxSidebarWidth)
-                      : defaultSidebarWidth;
+                      : Math.min(defaultSidebarWidth, maxSidebarWidth);
                   document.documentElement.style.setProperty(
                     '--sidebar-expanded-width',
                     expandedWidth + 'px'

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

@@ -102,6 +102,21 @@ describe('sidebar width CSS variables', () => {
 
     expect(widthVars().expanded).toBe(`${SIDEBAR_WIDTH.MIN}px`)
   })
+
+  it('clamps the default fallback to a viewport maximum below the default', () => {
+    const innerWidth = window.innerWidth
+    window.innerWidth = 800
+    try {
+      useSidebarStore.setState({ isCollapsed: false, sidebarWidth: Number.NaN })
+
+      useSidebarStore.getState().syncWidth()
+
+      expect(widthVars().expanded).toBe(`${getMaxSidebarWidth(800)}px`)
+      expect(getMaxSidebarWidth(800)).toBeLessThan(SIDEBAR_WIDTH.DEFAULT)
+    } finally {
+      window.innerWidth = innerWidth
+    }
+  })
 })
 
 describe('getMaxSidebarWidth', () => {

apps/sim/stores/sidebar/store.ts

@@ -21,10 +21,10 @@ export function getMaxSidebarWidth(viewportWidth: number): number {
 
 /** Clamps an expanded sidebar width into the valid range for the current viewport. */
 function clampSidebarWidth(width: number): number {
-  if (!Number.isFinite(width)) return SIDEBAR_WIDTH.DEFAULT
+  const target = Number.isFinite(width) ? width : SIDEBAR_WIDTH.DEFAULT
   const max =
     typeof window === 'undefined' ? Number.POSITIVE_INFINITY : getMaxSidebarWidth(window.innerWidth)
-  return Math.min(Math.max(width, SIDEBAR_WIDTH.MIN), max)
+  return Math.min(Math.max(target, SIDEBAR_WIDTH.MIN), max)
 }
 
 /**