From 05a31d96eaef57543d61eac9f4061f1709d9a669 Mon Sep 17 00:00:00 2001
From: PathGao <42336971+PathGao@users.noreply.github.com>
Date: Sun, 8 Nov 2026 14:30:29 +0800
Subject: [PATCH] fix(ui): keep scrollbar thumbs one width with a minimum
 length

The thumbs grew from 8px to 12px under the pointer, were fully rounded,
and in a long document the preview's shrank to a dot (#1063). Both now
follow Monaco's own slider: one width at rest and under the pointer,
with hover and drag only darkening the color, and a minimum length.

- Width: 12px on the existing 14px track, today's hover width, so the
  grab area never shrinks. The rest color stays rgba(120,120,120,0.35);
  VS Code ships a 14px thumb at about 0.4 alpha.
- Corner: 4px, Fluent's ControlCornerRadius / borderRadiusMedium
  (@fluentui/tokens), not a pill at 12px.
- Minimum length: 20px, Monaco's MINIMUM_SLIDER_SIZE (monaco-editor
  0.55.1, base/browser/ui/scrollbar/scrollbarState.js). It is a constant,
  not an editor option, so the preview uses the same number: min-height
  22px on ::-webkit-scrollbar-thumb is 20px inside the 1px transparent
  border. WebKit honors it (15px without it); Chromium already keeps
  its thumb at 24px visible, so there it changes nothing.
- Hover: Monaco's slider only swaps scrollbarSlider.background for
  hoverBackground/activeBackground. The width overrides that grew the
  editor's slider are removed rather than adjusted.
---
 src/lib/components/Editor.svelte | 17 ++---------------
 src/lib/utils/editorOptions.ts   |  4 ++--
 src/styles.css                   | 13 ++++++++-----
 3 files changed, 12 insertions(+), 22 deletions(-)

diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index 674906af..997c91c7 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -923,22 +923,9 @@
 		min-width: 0;
 	}
 
-	/* Monaco sizes the slider inline. Grow it under the pointer the way the
-	   preview's thumb does. */
+	/* Same corner as the preview's thumb in styles.css. */
 	.editor-container :global(.monaco-scrollable-element > .scrollbar > .slider) {
-		border-radius: 10px;
-	}
-
-	.editor-container :global(.monaco-scrollable-element > .scrollbar.vertical > .slider:hover),
-	.editor-container :global(.monaco-scrollable-element > .scrollbar.vertical > .slider.active) {
-		width: 12px !important;
-		left: 1px !important;
-	}
-
-	.editor-container :global(.monaco-scrollable-element > .scrollbar.horizontal > .slider:hover),
-	.editor-container :global(.monaco-scrollable-element > .scrollbar.horizontal > .slider.active) {
-		height: 12px !important;
-		top: 1px !important;
+		border-radius: 4px;
 	}
 
 	:global(.ghost-caret) {
diff --git a/src/lib/utils/editorOptions.ts b/src/lib/utils/editorOptions.ts
index 0145322a..adc80714 100644
--- a/src/lib/utils/editorOptions.ts
+++ b/src/lib/utils/editorOptions.ts
@@ -237,8 +237,8 @@ export function createdEditorOptions(
 			// Same track and thumb as the preview's ::-webkit-scrollbar in styles.css.
 			verticalScrollbarSize: 14,
 			horizontalScrollbarSize: 14,
-			verticalSliderSize: 8,
-			horizontalSliderSize: 8,
+			verticalSliderSize: 12,
+			horizontalSliderSize: 12,
 		},
 	};
 }
diff --git a/src/styles.css b/src/styles.css
index 23f9c375..61ee8c4f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -211,19 +211,22 @@ body {
 	background: transparent;
 }
 
-/* 8px at rest, 12px under the pointer, between the Windows and macOS thumbs.
-   Keep in step with the Monaco scrollbar in Editor.svelte. */
+/* A 12px thumb that keeps its width and only darkens under the pointer, as
+   Monaco's does, with Fluent's 4px control corner (5px less the 1px
+   transparent border). 22px is Monaco's 20px minimum slider length plus that
+   border at each end. Keep in step with the Monaco scrollbar in Editor.svelte. */
 ::-webkit-scrollbar-thumb {
 	background-color: rgba(120, 120, 120, 0.35);
-	border-radius: 10px;
-	border: 3px solid transparent;
+	border-radius: 5px;
+	border: 1px solid transparent;
 	background-clip: content-box;
+	min-width: 22px;
+	min-height: 22px;
 }
 
 ::-webkit-scrollbar-thumb:hover,
 ::-webkit-scrollbar-thumb:active {
 	background-color: rgba(120, 120, 120, 0.55);
-	border-width: 1px;
 }
 
 .markdown-body {