Skip to content

fix: Make xterm scrollbar clickable#59

Open
thoraxe wants to merge 1 commit intovultuk:mainfrom
thoraxe:fix/xterm-scrollbar-clickable
Open

fix: Make xterm scrollbar clickable#59
thoraxe wants to merge 1 commit intovultuk:mainfrom
thoraxe:fix/xterm-scrollbar-clickable

Conversation

@thoraxe
Copy link

@thoraxe thoraxe commented Jan 19, 2026

Summary

Fix the xterm scrollbar being unclickable due to the canvas element covering it.

Problem

Users cannot click or drag the terminal scrollbar because the xterm-screen canvas element is positioned on top of xterm-viewport which contains the scrollbar. Clicking on the scrollbar area results in text selection instead of scrolling.

This is a known xterm.js issue:

Solution

  • Add z-index: 1 to .xterm-viewport to bring the scrollbar above the canvas layer
  • 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

Test plan

  • Tested in Chrome on Windows - scrollbar is now clickable and draggable
  • Should be tested in Firefox and Safari

🤖 Generated with Claude Code

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 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant