diff --git a/packages/diff-view/src/parts/RenderCss/RenderCss.ts b/packages/diff-view/src/parts/RenderCss/RenderCss.ts
index 2d82fe7..ea6012d 100644
--- a/packages/diff-view/src/parts/RenderCss/RenderCss.ts
+++ b/packages/diff-view/src/parts/RenderCss/RenderCss.ts
@@ -5,6 +5,8 @@ import * as CursorConstants from '../CursorConstants/CursorConstants.ts'
 import { getSashWidth } from '../GetPaneWidths/GetPaneWidths.ts'
 import { getScrollBarThumbTop } from '../GetScrollBarThumbTop/GetScrollBarThumbTop.ts'
 
+const ScrollBarWidth = 44
+
 const getEmptyLineNumberHeights = (visibleLines: readonly VisibleLine[], itemHeight: number): readonly number[] => {
   const heights: number[] = []
   let emptyLineCount = 0
@@ -86,6 +88,7 @@ export const renderCss = (oldState: DiffViewState, newState: DiffViewState): any
   --ScrollBarHeight: ${scrollBarHeight}px;
   --ScrollBarBackgroundImage: ${scrollBarBackgroundImage};
   --ScrollBarThumbTop: ${scrollBarThumbTop}px;
+  --ScrollBarWidth: ${ScrollBarWidth}px;
   --DiffFontFamily: ${newState.fontFamily};
 }
 
@@ -452,7 +455,7 @@ ${getEmptyLineNumberCss(newState.visibleLinesLeft, newState.visibleLinesRight, i
   position: absolute;
   right: 2px;
   top: 0;
-  width: 8px;
+  width: var(--ScrollBarWidth);
 }
 
 .DiffScrollBarThumb {
diff --git a/packages/diff-view/test/RenderCss.test.ts b/packages/diff-view/test/RenderCss.test.ts
index 6dec4c8..3e28c59 100644
--- a/packages/diff-view/test/RenderCss.test.ts
+++ b/packages/diff-view/test/RenderCss.test.ts
@@ -52,6 +52,7 @@ test('renderCss renders left and right widths as css variables', (): void => {
   expect(result[2]).not.toContain('--DiffEditorSashLeft')
   expect(result[2]).not.toContain('left: var(--DiffEditorSashLeft);')
   expect(result[2]).toContain('--ScrollBarHeight: 40px;')
+  expect(result[2]).toContain('--ScrollBarWidth: 44px;')
   expect(result[2]).toContain('.DiffEditorHorizontal {')
   expect(result[2]).toContain('.DiffEditorVertical {')
   expect(result[2]).toContain('.DiffEditorWithSearch.DiffEditorHorizontal,\n.DiffEditorWithSearch.DiffEditorVertical {\n  flex-direction: column;\n}')
@@ -79,6 +80,7 @@ test('renderCss renders left and right widths as css variables', (): void => {
   expect(result[2]).toContain('overflow: auto;')
   expect(result[2]).toContain('text-underline-offset: 2px;')
   expect(result[2]).toContain('.DiffScrollBarThumb {')
+  expect(result[2]).toContain('width: var(--ScrollBarWidth);')
   expect(result[2]).toContain('background-image: var(--ScrollBarBackgroundImage);')
 })
 
diff --git a/packages/e2e/src/diff.package-lock-json-thousand-lines.ts b/packages/e2e/src/diff.package-lock-json-thousand-lines.ts
index ad09394..89f3923 100644
--- a/packages/e2e/src/diff.package-lock-json-thousand-lines.ts
+++ b/packages/e2e/src/diff.package-lock-json-thousand-lines.ts
@@ -112,6 +112,7 @@ export const test: Test = async ({ DiffView, expect, FileSystem, Locator, Worksp
   await expect(beforePane).toContainText('"version": "1.0.0"')
   await expect(afterPane).toContainText('"version": "1.0.1"')
   await expect(scrollBar).toHaveCount(1)
+  await expect(scrollBar).toHaveCSS('width', '44px')
 
   // await Command.execute('DiffView.handleWheel', 0, 999_999)