From fac6a2dbc88b6eec9fb30265d1e9b89e68de4ad8 Mon Sep 17 00:00:00 2001 From: Erik M Jacobs Date: Sun, 18 Jan 2026 20:34:27 -0500 Subject: [PATCH] fix: Make xterm scrollbar clickable The xterm-screen canvas was covering the scrollbar in xterm-viewport, preventing users from clicking/dragging the scrollbar. This is a known xterm.js issue (see xtermjs/xterm.js#512, #1284, #1751). Changes: - Add z-index: 1 to .xterm-viewport to bring scrollbar above canvas - Widen scrollbar from 10px to 14px for easier grabbing - Improve scrollbar thumb visibility with better contrast colors - Add min-height to scrollbar thumb for consistent grabbable area Co-Authored-By: Claude Opus 4.5 --- src/public/style.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/src/public/style.css b/src/public/style.css index 28259df..2722add 100644 --- a/src/public/style.css +++ b/src/public/style.css @@ -1230,6 +1230,7 @@ body { background-color: transparent !important; overflow-y: auto !important; overflow-x: hidden !important; + z-index: 1 !important; } .xterm .xterm-screen { @@ -1248,8 +1249,8 @@ body { /* Fix scrollbar extending beyond viewport */ .xterm-viewport::-webkit-scrollbar { - width: 10px; - height: 10px; + width: 14px; + height: 14px; } .xterm-viewport::-webkit-scrollbar-track { @@ -1257,12 +1258,14 @@ body { } .xterm-viewport::-webkit-scrollbar-thumb { - background: var(--border); - border-radius: 5px; + background: #555; + border-radius: 7px; + border: 2px solid var(--bg-secondary); + min-height: 40px; } .xterm-viewport::-webkit-scrollbar-thumb:hover { - background: var(--border-hover); + background: #777; } /* Folder Browser Modal */