From 1bb454bd2f405455e03e6a63957cd274d00c8a85 Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Sat, 24 Oct 2026 12:36:40 +0800
Subject: [PATCH] fix(terminal): Match the xterm scrollbar to the IDE's

Style xterm's own scrollbar slider with the scrollbar tokens, narrow it to
10px and blend the overview ruler border into the background.

Claude-Session: https://claude.ai/code/session_01B65qLEKnkeYTGdbwhLpjCu
---
 src/features/terminal/Terminal.module.css | 11 +++++++++--
 src/features/terminal/session.ts          |  2 ++
 src/features/terminal/theme.ts            |  5 ++---
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/features/terminal/Terminal.module.css b/src/features/terminal/Terminal.module.css
index feace5f23..15c9bdac0 100644
--- a/src/features/terminal/Terminal.module.css
+++ b/src/features/terminal/Terminal.module.css
@@ -70,8 +70,15 @@
 .pane :global(.xterm-viewport) {
   background-color: var(--bg-island, var(--bg-app)) !important;
 }
-.pane :global(.xterm .xterm-viewport::-webkit-scrollbar) {
-  width: 8px;
+.pane :global(.xterm .xterm-scrollable-element > .scrollbar > .slider) {
+  box-sizing: border-box;
+  border: 2px solid transparent;
+  border-radius: 6px;
+  background: var(--scrollbar-thumb) content-box;
+}
+.pane :global(.xterm .xterm-scrollable-element > .scrollbar > .slider:hover),
+.pane :global(.xterm .xterm-scrollable-element > .scrollbar > .slider.active) {
+  background: var(--scrollbar-thumb-hover) content-box;
 }
 
 .rename {
diff --git a/src/features/terminal/session.ts b/src/features/terminal/session.ts
index 560d30cc2..6e57dc56c 100644
--- a/src/features/terminal/session.ts
+++ b/src/features/terminal/session.ts
@@ -176,6 +176,8 @@ export class TerminalSession {
       drawBoldTextInBrightColors: false,
       minimumContrastRatio: 1,
       smoothScrollDuration: 0,
+      // Same width as the IDE's scrollbars (global.css); the slider is styled there too (Terminal.module.css).
+      overviewRuler: { width: 10 },
       theme: readTerminalTheme(),
     });
     this.term.loadAddon(this.fit);
diff --git a/src/features/terminal/theme.ts b/src/features/terminal/theme.ts
index 4b1788c48..631e76288 100644
--- a/src/features/terminal/theme.ts
+++ b/src/features/terminal/theme.ts
@@ -92,9 +92,8 @@ export function buildTheme(read: TokenReader): ITheme {
     selectionBackground: toHex(selection ?? mix(bg, accent, 0.32)),
     selectionInactiveBackground: toHex(selection ? mix(bg, selection, 0.6) : mix(bg, accent, 0.18)),
     selectionForeground: undefined,
-    scrollbarSliderBackground: toHex(mix(bg, fg, 0.14)),
-    scrollbarSliderHoverBackground: toHex(mix(bg, fg, 0.24)),
-    scrollbarSliderActiveBackground: toHex(mix(bg, fg, 0.32)),
+    // The overview ruler (search matches beside the scrollbar) needs no separator line.
+    overviewRulerBorder: toHex(bg),
     black: toHex(black),
     red: toHex(red),
     green: toHex(green),