fix: avoid overriding diff sash size

packages/diff-view/src/parts/GetPaneWidths/GetPaneWidths.ts

@@ -1,6 +1,6 @@
 import { clamp } from '../Clamp/Clamp.ts'
 
-const SASH_WIDTH = 4
+const SASH_WIDTH = 6
 const DEFAULT_MINIMUM_PANE_WIDTH = 50
 
 const getAvailableSize = (size: number): number => {

packages/diff-view/test/Create2.test.ts

@@ -19,8 +19,8 @@ test('create2 - creates state with provided parameters', (): void => {
     height,
     id,
     initial: true,
-    leftWidth: 148,
-    rightWidth: 148,
+    leftWidth: 147,
+    rightWidth: 147,
     uri,
     width,
     workspacePath,

packages/diff-view/test/GetNextPaneSizes.test.ts

@@ -10,7 +10,7 @@ test('getNextPaneSizes preserves the current pane ratio for horizontal layout',
   }
 
   expect(getNextPaneSizes(state, 'horizontal', 404, 100)).toEqual({
-    leftWidth: 300,
+    leftWidth: 298,
     rightWidth: 100,
   })
 })
@@ -23,7 +23,7 @@ test('getNextPaneSizes uses height for vertical layout', (): void => {
   }
 
   expect(getNextPaneSizes(state, 'vertical', 404, 204)).toEqual({
-    leftWidth: 150,
+    leftWidth: 148,
     rightWidth: 50,
   })
 })
@@ -36,7 +36,7 @@ test('getNextPaneSizes falls back to equal panes without existing pane sizes', (
   }
 
   expect(getNextPaneSizes(state, 'horizontal', 304, 100)).toEqual({
-    leftWidth: 150,
-    rightWidth: 150,
+    leftWidth: 149,
+    rightWidth: 149,
   })
 })

packages/diff-view/test/HandleResize.test.ts

@@ -28,10 +28,10 @@ test('handleResize updates scroll bounds and visible lines for a smaller viewpor
     deltaY: 20,
     finalDeltaY: 20,
     height: 40,
-    leftWidth: 128,
+    leftWidth: 127,
     maxLineY: 3,
     minLineY: 1,
-    rightWidth: 128,
+    rightWidth: 127,
     scrollBarActive: true,
     scrollBarHeight: 30,
     visibleLinesLeft: [

packages/diff-view/test/HandleSashPointer.test.ts

@@ -7,8 +7,8 @@ import { handleSashPointerUp } from '../src/parts/HandleSashPointerUp/HandleSash
 test('sash pointer handlers resize left and right panes while dragging', (): void => {
   const state = {
     ...createDefaultState(),
-    leftWidth: 148,
-    rightWidth: 148,
+    leftWidth: 147,
+    rightWidth: 147,
     width: 300,
     x: 10,
   }
@@ -19,28 +19,28 @@ test('sash pointer handlers resize left and right panes while dragging', (): voi
 
   expect(downState).toMatchObject({
     isResizing: true,
-    resizeOffsetX: 12,
+    resizeOffsetX: 13,
   })
   expect(moveState).toMatchObject({
     isResizing: true,
-    leftWidth: 188,
-    rightWidth: 108,
+    leftWidth: 187,
+    rightWidth: 107,
   })
   expect(upState).toMatchObject({
     isResizing: false,
-    leftWidth: 188,
+    leftWidth: 187,
     resizeOffsetX: 0,
-    rightWidth: 108,
+    rightWidth: 107,
   })
 })
 
 test('sash pointer move clamps widths to keep both panes visible', (): void => {
   const state = {
     ...createDefaultState(),
     isResizing: true,
-    leftWidth: 148,
-    resizeOffsetX: 12,
-    rightWidth: 148,
+    leftWidth: 147,
+    resizeOffsetX: 13,
+    rightWidth: 147,
     width: 300,
     x: 10,
   }
@@ -49,7 +49,7 @@ test('sash pointer move clamps widths to keep both panes visible', (): void => {
 
   expect(result).toMatchObject({
     leftWidth: 50,
-    rightWidth: 246,
+    rightWidth: 244,
   })
 })
 
@@ -58,8 +58,8 @@ test('sash pointer handlers resize stacked panes vertically', (): void => {
     ...createDefaultState(),
     height: 300,
     layout: 'vertical' as const,
-    leftWidth: 148,
-    rightWidth: 148,
+    leftWidth: 147,
+    rightWidth: 147,
     y: 10,
   }
 
@@ -70,17 +70,17 @@ test('sash pointer handlers resize stacked panes vertically', (): void => {
   expect(downState).toMatchObject({
     isResizing: true,
     resizeOffsetX: 0,
-    resizeOffsetY: 12,
+    resizeOffsetY: 13,
   })
   expect(moveState).toMatchObject({
     isResizing: true,
-    leftWidth: 188,
-    rightWidth: 108,
+    leftWidth: 187,
+    rightWidth: 107,
   })
   expect(upState).toMatchObject({
     isResizing: false,
-    leftWidth: 188,
+    leftWidth: 187,
     resizeOffsetY: 0,
-    rightWidth: 108,
+    rightWidth: 107,
   })
 })

packages/diff-view/test/RenderCss.test.ts

@@ -82,6 +82,21 @@ test('renderCss renders left and right widths as css variables', (): void => {
   expect(result[2]).toContain('background-image: var(--ScrollBarBackgroundImage);')
 })
 
+test('renderCss uses the default separator width for sash sizing', (): void => {
+  const oldState = createDefaultState()
+  const newState = {
+    ...oldState,
+    id: 1,
+  }
+
+  const result = renderCss(oldState, newState)
+
+  expect(result[2]).toContain('.SashVertical {\n  cursor: col-resize;\n  width: 6px;\n}')
+  expect(result[2]).toContain('.SashHorizontal {\n  cursor: row-resize;\n  height: 6px;\n}')
+  expect(result[2]).toContain('--DiffSeparatorWidth: 6px;')
+  expect(result[2]).toContain('width: var(--DiffSeparatorWidth);')
+})
+
 test('renderCss renders height utility classes for empty line numbers', (): void => {
   const oldState = createDefaultState()
   const newState = {

packages/diff-view/test/SetLayout.test.ts

@@ -6,19 +6,19 @@ test('setLayout switches to vertical mode using the available height', (): void
   const state = {
     ...createDefaultState(),
     height: 200,
-    leftWidth: 148,
-    rightWidth: 148,
+    leftWidth: 147,
+    rightWidth: 147,
     width: 300,
   }
 
   const result = setLayout(state, 'vertical')
 
   expect(result).toMatchObject({
     layout: 'vertical',
-    leftWidth: 98,
+    leftWidth: 97,
     resizeOffsetX: 0,
     resizeOffsetY: 0,
-    rightWidth: 98,
+    rightWidth: 97,
   })
 })
 
@@ -27,16 +27,16 @@ test('setLayout switches back to horizontal mode using the available width', ():
     ...createDefaultState(),
     height: 200,
     layout: 'vertical' as const,
-    leftWidth: 98,
-    rightWidth: 98,
+    leftWidth: 97,
+    rightWidth: 97,
     width: 300,
   }
 
   const result = setLayout(state, 'horizontal')
 
   expect(result).toMatchObject({
     layout: 'horizontal',
-    leftWidth: 148,
-    rightWidth: 148,
+    leftWidth: 147,
+    rightWidth: 147,
   })
 })