From 04db98750f580b84db45d2c4622cf1ff4a81b61e Mon Sep 17 00:00:00 2001 From: Le Vivilet Date: Thu, 9 Jul 2026 09:59:05 +0000 Subject: [PATCH] fix: avoid overriding diff sash size --- .../src/parts/GetPaneWidths/GetPaneWidths.ts | 2 +- packages/diff-view/test/Create2.test.ts | 4 +-- .../diff-view/test/GetNextPaneSizes.test.ts | 8 ++--- packages/diff-view/test/HandleResize.test.ts | 4 +-- .../diff-view/test/HandleSashPointer.test.ts | 36 +++++++++---------- packages/diff-view/test/RenderCss.test.ts | 15 ++++++++ packages/diff-view/test/SetLayout.test.ts | 16 ++++----- 7 files changed, 50 insertions(+), 35 deletions(-) diff --git a/packages/diff-view/src/parts/GetPaneWidths/GetPaneWidths.ts b/packages/diff-view/src/parts/GetPaneWidths/GetPaneWidths.ts index d1b2c98e..e31a0e4b 100644 --- a/packages/diff-view/src/parts/GetPaneWidths/GetPaneWidths.ts +++ b/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 => { diff --git a/packages/diff-view/test/Create2.test.ts b/packages/diff-view/test/Create2.test.ts index 113a448d..141eea38 100644 --- a/packages/diff-view/test/Create2.test.ts +++ b/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, diff --git a/packages/diff-view/test/GetNextPaneSizes.test.ts b/packages/diff-view/test/GetNextPaneSizes.test.ts index 1174e8fd..995160c3 100644 --- a/packages/diff-view/test/GetNextPaneSizes.test.ts +++ b/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, }) }) diff --git a/packages/diff-view/test/HandleResize.test.ts b/packages/diff-view/test/HandleResize.test.ts index 9d936911..37705b1f 100644 --- a/packages/diff-view/test/HandleResize.test.ts +++ b/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: [ diff --git a/packages/diff-view/test/HandleSashPointer.test.ts b/packages/diff-view/test/HandleSashPointer.test.ts index cc3ffb96..3c106a15 100644 --- a/packages/diff-view/test/HandleSashPointer.test.ts +++ b/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,18 +19,18 @@ 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, }) }) @@ -38,9 +38,9 @@ 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, }) }) diff --git a/packages/diff-view/test/RenderCss.test.ts b/packages/diff-view/test/RenderCss.test.ts index 6dec4c89..6cbb933f 100644 --- a/packages/diff-view/test/RenderCss.test.ts +++ b/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 = { diff --git a/packages/diff-view/test/SetLayout.test.ts b/packages/diff-view/test/SetLayout.test.ts index f1e1cfe5..718c9d3c 100644 --- a/packages/diff-view/test/SetLayout.test.ts +++ b/packages/diff-view/test/SetLayout.test.ts @@ -6,8 +6,8 @@ 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, } @@ -15,10 +15,10 @@ test('setLayout switches to vertical mode using the available height', (): void expect(result).toMatchObject({ layout: 'vertical', - leftWidth: 98, + leftWidth: 97, resizeOffsetX: 0, resizeOffsetY: 0, - rightWidth: 98, + rightWidth: 97, }) }) @@ -27,8 +27,8 @@ 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, } @@ -36,7 +36,7 @@ test('setLayout switches back to horizontal mode using the available width', (): expect(result).toMatchObject({ layout: 'horizontal', - leftWidth: 148, - rightWidth: 148, + leftWidth: 147, + rightWidth: 147, }) })