fix: account for divider size in pane calculations (#874)

Previously, percentage-based pane sizes were calculated against the full
container size, ignoring the space taken by dividers. This caused panes
totaling 100% to overflow their container by the combined width of all
dividers.

Changes:
- Add `dividerSize` prop (default: 1px) to SplitPane for accurate sizing
- Subtract total divider width from available space before calculating
  percentage-based pane sizes
- Apply same adjustment when redistributing pane sizes on container resize
- Update tests to verify correct behavior with divider width accounting

Fixes #871

Author: tomkp

src/components/SplitPane.test.tsx

@@ -7,6 +7,7 @@ import { triggerResize, clearResizeObservers } from '../test/setup';
 // These match the mock in test/setup.ts
 const CONTAINER_WIDTH = 1024;
 const CONTAINER_HEIGHT = 768;
+const DEFAULT_DIVIDER_SIZE = 1;
 
 describe('SplitPane', () => {
   beforeEach(() => {
@@ -122,10 +123,14 @@ describe('SplitPane initial size calculation', () => {
     const panes = container.querySelectorAll('[data-pane="true"]');
     expect(panes).toHaveLength(2);
 
-    // First pane: 30% of 1024 = 307.2px
-    expect(panes[0]).toHaveStyle({ width: `${CONTAINER_WIDTH * 0.3}px` });
-    // Second pane: remaining 70% = 716.8px
-    expect(panes[1]).toHaveStyle({ width: `${CONTAINER_WIDTH * 0.7}px` });
+    // Available space = container - divider = 1024 - 1 = 1023px
+    const availableWidth = CONTAINER_WIDTH - DEFAULT_DIVIDER_SIZE;
+    // First pane: 30% of available space (306.9px)
+    const pane1Width = parseFloat((panes[0] as HTMLElement).style.width);
+    expect(pane1Width).toBeCloseTo(availableWidth * 0.3, 1);
+    // Second pane: remaining 70% of available space (716.1px)
+    const pane2Width = parseFloat((panes[1] as HTMLElement).style.width);
+    expect(pane2Width).toBeCloseTo(availableWidth * 0.7, 1);
   });
 
   it('distributes remaining space equally among multiple auto-sized panes', async () => {
@@ -144,10 +149,12 @@ describe('SplitPane initial size calculation', () => {
     const panes = container.querySelectorAll('[data-pane="true"]');
     expect(panes).toHaveLength(3);
 
+    // Available space = container - (2 dividers * 1px) = 1024 - 2 = 1022px
+    const availableWidth = CONTAINER_WIDTH - DEFAULT_DIVIDER_SIZE * 2;
     // First pane: 200px fixed
     expect(panes[0]).toHaveStyle({ width: '200px' });
-    // Remaining (1024 - 200) = 824px split equally: 412px each
-    const remainingEach = (CONTAINER_WIDTH - 200) / 2;
+    // Remaining (1022 - 200) = 822px split equally: 411px each
+    const remainingEach = (availableWidth - 200) / 2;
     expect(panes[1]).toHaveStyle({ width: `${remainingEach}px` });
     expect(panes[2]).toHaveStyle({ width: `${remainingEach}px` });
   });
@@ -167,8 +174,10 @@ describe('SplitPane initial size calculation', () => {
     const panes = container.querySelectorAll('[data-pane="true"]');
     expect(panes).toHaveLength(2);
 
-    // Each pane gets 50% = 512px
-    const halfWidth = CONTAINER_WIDTH / 2;
+    // Available space = container - divider = 1024 - 1 = 1023px
+    // Each pane gets 50% = 511.5px
+    const availableWidth = CONTAINER_WIDTH - DEFAULT_DIVIDER_SIZE;
+    const halfWidth = availableWidth / 2;
     expect(panes[0]).toHaveStyle({ width: `${halfWidth}px` });
     expect(panes[1]).toHaveStyle({ width: `${halfWidth}px` });
   });
@@ -189,12 +198,14 @@ describe('SplitPane initial size calculation', () => {
     const panes = container.querySelectorAll('[data-pane="true"]');
     expect(panes).toHaveLength(3);
 
-    // First two panes: 25% each = 256px
-    const quarterWidth = CONTAINER_WIDTH * 0.25;
+    // Available space = container - (2 dividers * 1px) = 1024 - 2 = 1022px
+    const availableWidth = CONTAINER_WIDTH - DEFAULT_DIVIDER_SIZE * 2;
+    // First two panes: 25% each of available space
+    const quarterWidth = availableWidth * 0.25;
     expect(panes[0]).toHaveStyle({ width: `${quarterWidth}px` });
     expect(panes[1]).toHaveStyle({ width: `${quarterWidth}px` });
-    // Third pane: remaining 50% = 512px
-    expect(panes[2]).toHaveStyle({ width: `${CONTAINER_WIDTH * 0.5}px` });
+    // Third pane: remaining 50% of available space
+    expect(panes[2]).toHaveStyle({ width: `${availableWidth * 0.5}px` });
   });
 
   it('handles vertical direction correctly', async () => {
@@ -212,10 +223,12 @@ describe('SplitPane initial size calculation', () => {
     const panes = container.querySelectorAll('[data-pane="true"]');
     expect(panes).toHaveLength(2);
 
-    // First pane: 25% of 768 = 192px
-    expect(panes[0]).toHaveStyle({ height: `${CONTAINER_HEIGHT * 0.25}px` });
-    // Second pane: remaining 75% = 576px
-    expect(panes[1]).toHaveStyle({ height: `${CONTAINER_HEIGHT * 0.75}px` });
+    // Available height = container - divider = 768 - 1 = 767px
+    const availableHeight = CONTAINER_HEIGHT - DEFAULT_DIVIDER_SIZE;
+    // First pane: 25% of available height
+    expect(panes[0]).toHaveStyle({ height: `${availableHeight * 0.25}px` });
+    // Second pane: remaining 75% of available height
+    expect(panes[1]).toHaveStyle({ height: `${availableHeight * 0.75}px` });
   });
 
   it('respects controlled size prop over defaultSize', async () => {
@@ -235,10 +248,12 @@ describe('SplitPane initial size calculation', () => {
     const panes = container.querySelectorAll('[data-pane="true"]');
     expect(panes).toHaveLength(2);
 
+    // Available space = container - divider = 1024 - 1 = 1023px
+    const availableWidth = CONTAINER_WIDTH - DEFAULT_DIVIDER_SIZE;
     // First pane: controlled size of 400px (not 30%)
     expect(panes[0]).toHaveStyle({ width: '400px' });
-    // Second pane: remaining 624px
-    expect(panes[1]).toHaveStyle({ width: `${CONTAINER_WIDTH - 400}px` });
+    // Second pane: remaining available space minus first pane
+    expect(panes[1]).toHaveStyle({ width: `${availableWidth - 400}px` });
   });
 
   it('updates pane sizes when controlled size prop changes', async () => {
@@ -355,19 +370,27 @@ describe('SplitPane container resize behavior', () => {
 
     const panes = container.querySelectorAll('[data-pane="true"]');
 
-    // Initial: 200px + 824px = 1024px
+    // Available space = container - divider = 1024 - 1 = 1023px
+    const initialAvailable = CONTAINER_WIDTH - DEFAULT_DIVIDER_SIZE;
+    // Initial: 200px + 823px = 1023px (available space)
     expect(panes[0]).toHaveStyle({ width: '200px' });
-    expect(panes[1]).toHaveStyle({ width: `${CONTAINER_WIDTH - 200}px` });
+    expect(panes[1]).toHaveStyle({ width: `${initialAvailable - 200}px` });
 
     // Simulate container resize to 2048px (double)
     await act(async () => {
       triggerResize(2048, 768);
       await vi.runAllTimersAsync();
     });
 
+    // Available space at new size = 2048 - 1 = 2047px
+    const newAvailable = 2048 - DEFAULT_DIVIDER_SIZE;
     // Uncontrolled panes should scale proportionally
-    expect(panes[0]).toHaveStyle({ width: '400px' });
-    expect(panes[1]).toHaveStyle({ width: `${2048 - 400}px` });
+    // Original ratio: 200/1023 and 823/1023
+    const expectedPane1 = (200 / initialAvailable) * newAvailable;
+    const expectedPane2 =
+      ((initialAvailable - 200) / initialAvailable) * newAvailable;
+    expect(panes[0]).toHaveStyle({ width: `${expectedPane1}px` });
+    expect(panes[1]).toHaveStyle({ width: `${expectedPane2}px` });
   });
 
   it('maintains controlled sizes in vertical direction on container resize', async () => {
@@ -398,3 +421,101 @@ describe('SplitPane container resize behavior', () => {
     expect(panes[1]).toHaveStyle({ height: '300px' });
   });
 });
+
+describe('SplitPane divider size accounting', () => {
+  beforeEach(() => {
+    clearResizeObservers();
+  });
+
+  it('accounts for divider width when calculating percentage-based pane sizes', async () => {
+    // Custom divider with a known width
+    const DividerWithWidth = (props: {
+      direction: string;
+      onMouseDown?: () => void;
+      onTouchStart?: () => void;
+      onTouchEnd?: () => void;
+      onKeyDown?: () => void;
+    }) => (
+      <div
+        role="separator"
+        style={{ width: props.direction === 'horizontal' ? '10px' : undefined }}
+        data-testid="divider"
+        onMouseDown={props.onMouseDown}
+        onTouchStart={props.onTouchStart}
+        onTouchEnd={props.onTouchEnd}
+        onKeyDown={props.onKeyDown}
+      />
+    );
+
+    const { container } = render(
+      <SplitPane
+        direction="horizontal"
+        divider={DividerWithWidth}
+        dividerSize={10}
+      >
+        <Pane defaultSize="33%">Pane 1</Pane>
+        <Pane defaultSize="34%">Pane 2</Pane>
+        <Pane defaultSize="33%">Pane 3</Pane>
+      </SplitPane>
+    );
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    const panes = container.querySelectorAll('[data-pane="true"]');
+    expect(panes).toHaveLength(3);
+
+    // Get actual pane widths
+    const pane1Width = parseFloat(
+      (panes[0] as HTMLElement).style.width.replace('px', '')
+    );
+    const pane2Width = parseFloat(
+      (panes[1] as HTMLElement).style.width.replace('px', '')
+    );
+    const pane3Width = parseFloat(
+      (panes[2] as HTMLElement).style.width.replace('px', '')
+    );
+
+    // With 2 dividers at 10px each, available space for panes is 1024 - 20 = 1004px
+    // Currently the bug causes panes to total 100% of 1024 = 1024px (overflow!)
+    // After fix: panes should total 1004px (accounting for divider widths)
+    const totalPaneWidth = pane1Width + pane2Width + pane3Width;
+    const dividerWidth = 10;
+    const dividerCount = 2;
+    const expectedTotalPaneWidth =
+      CONTAINER_WIDTH - dividerWidth * dividerCount;
+
+    // The total pane width should not exceed container minus dividers
+    expect(totalPaneWidth).toBeLessThanOrEqual(CONTAINER_WIDTH);
+    expect(totalPaneWidth).toBeCloseTo(expectedTotalPaneWidth, 0);
+  });
+
+  it('accounts for default 1px divider width in size calculations', async () => {
+    const { container } = render(
+      <SplitPane direction="horizontal">
+        <Pane defaultSize="50%">Pane 1</Pane>
+        <Pane defaultSize="50%">Pane 2</Pane>
+      </SplitPane>
+    );
+
+    await act(async () => {
+      await vi.runAllTimersAsync();
+    });
+
+    const panes = container.querySelectorAll('[data-pane="true"]');
+    const pane1Width = parseFloat(
+      (panes[0] as HTMLElement).style.width.replace('px', '')
+    );
+    const pane2Width = parseFloat(
+      (panes[1] as HTMLElement).style.width.replace('px', '')
+    );
+
+    // With 1 divider at 1px, available space is 1024 - 1 = 1023px
+    // Each pane should be 50% of 1023 = 511.5px
+    const totalPaneWidth = pane1Width + pane2Width;
+    const expectedTotal = CONTAINER_WIDTH - 1; // minus 1px divider
+
+    expect(totalPaneWidth).toBeCloseTo(expectedTotal, 0);
+  });
+});

src/components/SplitPane.tsx

@@ -59,6 +59,7 @@ export function SplitPane(props: SplitPaneProps) {
     divider: CustomDivider,
     dividerStyle,
     dividerClassName,
+    dividerSize = 1,
     children,
   } = props;
 
@@ -124,11 +125,15 @@ export function SplitPane(props: SplitPaneProps) {
         return new Array(paneCount).fill(0);
       }
 
+      // Account for divider widths when calculating available space
+      const totalDividerWidth = dividerSize * (paneCount - 1);
+      const availableSpace = containerSz - totalDividerWidth;
+
       // First pass: calculate sizes for panes with explicit sizes
       const sizes: (number | null)[] = paneConfigs.map((config) => {
         const paneSize = config.size ?? config.defaultSize;
         if (paneSize !== undefined) {
-          return convertToPixels(paneSize, containerSz);
+          return convertToPixels(paneSize, availableSpace);
         }
         return null; // Mark as needing auto-size
       });
@@ -139,13 +144,13 @@ export function SplitPane(props: SplitPaneProps) {
         0
       );
       const autoSizedCount = sizes.filter((s) => s === null).length;
-      const remainingSpace = containerSz - explicitTotal;
+      const remainingSpace = availableSpace - explicitTotal;
       const autoSize = autoSizedCount > 0 ? remainingSpace / autoSizedCount : 0;
 
       // Second pass: fill in auto-sized panes
       return sizes.map((size) => (size === null ? autoSize : size));
     },
-    [paneCount, paneConfigs]
+    [paneCount, paneConfigs, dividerSize]
   );
 
   const [paneSizes, setPaneSizes] = useState<number[]>(() =>
@@ -191,6 +196,10 @@ export function SplitPane(props: SplitPaneProps) {
         (config) => config.size !== undefined
       );
 
+      // Calculate available space after accounting for dividers
+      const totalDividerWidth = dividerSize * (paneCount - 1);
+      const availableSpace = newContainerSize - totalDividerWidth;
+
       setPaneSizes((currentSizes) => {
         // If sizes are uninitialized or pane count changed
         if (
@@ -206,8 +215,8 @@ export function SplitPane(props: SplitPaneProps) {
           if (hasControlledSizes) {
             return calculateInitialSizes(newContainerSize);
           }
-          // For uncontrolled panes, distribute proportionally
-          return distributeSizes(currentSizes, newContainerSize);
+          // For uncontrolled panes, distribute proportionally using available space
+          return distributeSizes(currentSizes, availableSpace);
         }
 
         // First measurement - use initial sizes
@@ -218,7 +227,7 @@ export function SplitPane(props: SplitPaneProps) {
         return currentSizes;
       });
     },
-    [paneCount, paneConfigs, calculateInitialSizes]
+    [paneCount, paneConfigs, calculateInitialSizes, dividerSize]
   );
 
   // Measure container size with ResizeObserver

src/types/index.ts

@@ -50,6 +50,9 @@ export interface SplitPaneProps {
   /** Custom divider class name */
   dividerClassName?: string;
 
+  /** Size of the divider in pixels (used for accurate pane size calculations) */
+  dividerSize?: number;
+
   /** Pane children */
   children: ReactNode;
 }