Fix layout bug

Author: TylerJDev

packages/react/src/PageLayout/PageLayout.module.css

@@ -4,6 +4,8 @@
   paneMaxWidthDiffBreakpoint: 1280;
   /* Default value for --pane-max-width-diff below the breakpoint */
   paneMaxWidthDiffDefault: 511;
+  /* Default value for --sidebar-max-width-diff (constant across all viewports) */
+  sidebarMaxWidthDiffDefault: 256;
 }
 
 .PageLayoutRoot {
@@ -29,6 +31,8 @@
   --pane-width-large: 100%;
   /* NOTE: This value is exported via :export for use in usePaneWidth.ts */
   --pane-max-width-diff: 511px;
+  /* Sidebar uses a smaller diff since it doesn't need to reserve space for a file tree pane */
+  --sidebar-max-width-diff: 256px;
 
   @media screen and (min-width: 768px) {
     --pane-width-small: 240px;
@@ -762,7 +766,7 @@
   */
   display: flex;
   flex-direction: row;
-  flex-shrink: 0;
+  flex-shrink: 1;
   height: 100%;
 
   &:where([data-is-hidden='true']) {

packages/react/src/PageLayout/PageLayout.test.tsx

@@ -272,4 +272,23 @@ describe('PageLayout', async () => {
       expect(container.firstChild?.nodeName).toEqual('DIV')
     })
   })
+
+  describe('PageLayout.Sidebar', () => {
+    it('SidebarWrapper should allow shrinking to prevent overflow at narrow viewports', () => {
+      const {container} = render(
+        <PageLayout>
+          <PageLayout.Content>Content</PageLayout.Content>
+          <PageLayout.Sidebar resizable width={{min: '256px', default: '296px', max: '768px'}}>
+            Sidebar
+          </PageLayout.Sidebar>
+        </PageLayout>,
+      )
+
+      const sidebarWrapper = container.querySelector<HTMLElement>('[class*="SidebarWrapper"]')
+      expect(sidebarWrapper).not.toBeNull()
+
+      const style = getComputedStyle(sidebarWrapper!)
+      expect(style.flexShrink).toBe('1')
+    })
+  })
 })

packages/react/src/PageLayout/usePaneWidth.test.ts

@@ -9,6 +9,7 @@ import {
   updateAriaValues,
   defaultPaneWidth,
   DEFAULT_MAX_WIDTH_DIFF,
+  DEFAULT_SIDEBAR_MAX_WIDTH_DIFF,
   SSR_DEFAULT_MAX_WIDTH,
   ARROW_KEY_STEP,
 } from './usePaneWidth'
@@ -1141,14 +1142,23 @@ describe('helper functions', () => {
   })
 
   describe('getPaneMaxWidthDiff', () => {
-    it('should return default when element is null', () => {
+    it('should return default pane diff when element is null', () => {
       expect(getPaneMaxWidthDiff(null)).toBe(DEFAULT_MAX_WIDTH_DIFF)
     })
 
-    it('should return default when CSS variable is not set', () => {
+    it('should return default sidebar diff when element is null and isSidebar is true', () => {
+      expect(getPaneMaxWidthDiff(null, true)).toBe(DEFAULT_SIDEBAR_MAX_WIDTH_DIFF)
+    })
+
+    it('should return default pane diff when CSS variable is not set', () => {
       const element = document.createElement('div')
       expect(getPaneMaxWidthDiff(element)).toBe(DEFAULT_MAX_WIDTH_DIFF)
     })
+
+    it('should return default sidebar diff when CSS variable is not set and isSidebar is true', () => {
+      const element = document.createElement('div')
+      expect(getPaneMaxWidthDiff(element, true)).toBe(DEFAULT_SIDEBAR_MAX_WIDTH_DIFF)
+    })
   })
 
   describe('updateAriaValues', () => {
@@ -1187,6 +1197,7 @@ describe('helper functions', () => {
 describe('constants', () => {
   it('should export expected constants', () => {
     expect(DEFAULT_MAX_WIDTH_DIFF).toBe(511)
+    expect(DEFAULT_SIDEBAR_MAX_WIDTH_DIFF).toBe(256)
     expect(SSR_DEFAULT_MAX_WIDTH).toBe(600)
     expect(ARROW_KEY_STEP).toBe(3)
     expect(defaultPaneWidth).toEqual({small: 256, medium: 296, large: 320})

packages/react/src/PageLayout/usePaneWidth.ts

@@ -68,6 +68,12 @@ export type UsePaneWidthResult = {
  */
 export const DEFAULT_MAX_WIDTH_DIFF = Number(cssExports.paneMaxWidthDiffDefault)
 
+/**
+ * Default value for --sidebar-max-width-diff CSS variable.
+ * Unlike --pane-max-width-diff, this is constant across all viewport sizes.
+ */
+export const DEFAULT_SIDEBAR_MAX_WIDTH_DIFF = Number(cssExports.sidebarMaxWidthDiffDefault)
+
 // --pane-max-width-diff changes at this breakpoint in PageLayout.module.css.
 const DEFAULT_PANE_MAX_WIDTH_DIFF_BREAKPOINT = Number(cssExports.paneMaxWidthDiffBreakpoint)
 /**
@@ -106,14 +112,17 @@ export const getDefaultPaneWidth = (w: PaneWidthValue): number => {
 }
 
 /**
- * Gets the --pane-max-width-diff CSS variable value from a pane element.
- * This value is set by CSS media queries and controls the max pane width constraint.
+ * Gets the max-width-diff CSS variable value from a pane element.
+ * For sidebars, reads --sidebar-max-width-diff (constant across viewports).
+ * For panes, reads --pane-max-width-diff (changes at 1280px breakpoint).
  * Note: This calls getComputedStyle which forces layout - cache the result when possible.
  */
-export function getPaneMaxWidthDiff(paneElement: HTMLElement | null): number {
-  if (!paneElement) return DEFAULT_MAX_WIDTH_DIFF
-  const value = parseInt(getComputedStyle(paneElement).getPropertyValue('--pane-max-width-diff'), 10)
-  return value > 0 ? value : DEFAULT_MAX_WIDTH_DIFF
+export function getPaneMaxWidthDiff(paneElement: HTMLElement | null, isSidebar = false): number {
+  const defaultValue = isSidebar ? DEFAULT_SIDEBAR_MAX_WIDTH_DIFF : DEFAULT_MAX_WIDTH_DIFF
+  const cssVar = isSidebar ? '--sidebar-max-width-diff' : '--pane-max-width-diff'
+  if (!paneElement) return defaultValue
+  const value = parseInt(getComputedStyle(paneElement).getPropertyValue(cssVar), 10)
+  return value > 0 ? value : defaultValue
 }
 
 // Helper to update ARIA slider attributes via direct DOM manipulation
@@ -197,7 +206,7 @@ export function usePaneWidth({
   })
   // Cache the CSS variable value to avoid getComputedStyle during drag (causes layout thrashing)
   // Updated on mount and resize when breakpoints might change
-  const maxWidthDiffRef = React.useRef(DEFAULT_MAX_WIDTH_DIFF)
+  const maxWidthDiffRef = React.useRef(constrainToViewport ? DEFAULT_SIDEBAR_MAX_WIDTH_DIFF : DEFAULT_MAX_WIDTH_DIFF)
 
   // Calculate max width constraint - for custom widths this is capped to viewport bounds
   // when constrainToViewport is set (e.g., Sidebar), otherwise it uses the custom max directly.
@@ -337,7 +346,7 @@ export function usePaneWidth({
       lastViewportWidth = currentViewportWidth
 
       if (crossedBreakpoint) {
-        maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current)
+        maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current, constrainToViewport)
       }
 
       const actualMax = getMaxPaneWidthRef.current()
@@ -365,7 +374,7 @@ export function usePaneWidth({
     }
 
     // Initial calculation on mount
-    maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current)
+    maxWidthDiffRef.current = getPaneMaxWidthDiff(paneRef.current, constrainToViewport)
     const initialMax = getMaxPaneWidthRef.current()
     setMaxPaneWidth(initialMax)
     paneRef.current?.style.setProperty('--pane-max-width', `${initialMax}px`)