[BUG] Conversation fade-gradient overlays the vertical scrollbar in the VSCode extension
Preflight Checklist
- [x] I have searched existing issues and this hasn't been reported yet
- [x] This is a single bug report (please file separate reports for different bugs)
- [x] I am using the latest version of Claude Code
What's Wrong?
In the Claude Code VSCode extension's conversation panel, the bottom portion of the vertical scrollbar appears washed out / partially transparent against the background.
The cause is the conversation's fade-out gradient overlay (DOM class messageGradient_*) extending the full width of the messages container, including the scrollbar column. The overlay sits above the scrollbar in the stacking order, so it visually mutes the lower portion of the scrollbar thumb even though the scrollbar's own CSS color is uniform top-to-bottom.
What Should Happen?
The vertical scrollbar should render at full opacity end-to-end and not be obscured by the fade gradient. Either:
- the scrollbar (or its container) should sit above the gradient in the z-stacking order, or
- the messageGradient_* overlay should be constrained to stop before the scrollbar column (e.g. right: var(--scrollbar-width, 10px) or equivalent padding).
Error Messages/Logs
None — this is a visual rendering issue, no errors.
Steps to Reproduce
- Open the Claude Code panel in VSCode and start a conversation long enough to require vertical scrolling.
- Look at the vertical scrollbar on the right edge of the conversation. Compare its color near the top vs. near the bottom.
- The bottom portion appears noticeably more transparent / washed out, while the scrollbar's CSS background-color is uniform (verified in webview DevTools: ::-webkit-scrollbar-thumb { background-color: var(--vscode-scrollbarSlider-background) }, and the variable resolves identically top-to-bottom).
- Confirmed not fixable via user-level workbench.colorCustomizations (scrollbarSlider.* keys) — the issue is the overlay element, not the scrollbar color.
Claude Model
Opus
Is this a regression?
I don't know
Last Working Version
_No response_
Claude Code Version
2.1.143
Platform
Anthropic API
Operating System
Ubuntu/Debian Linux
Terminal/Shell
Other
Additional Information
This is a Claude Code VSCode extension UI bug, not a CLI bug — none of the terminal-related fields really apply. Filing under this template because there is no extension-specific bug report.
Environment:
VSCode running locally on Linux
Reproduced under multiple dark themes (Abyss, Dark 2026); not theme-dependent
User-level workbench.colorCustomizations does not affect the gradient
Attached screenshots here showing the scrollbar in normal and fade states.
Normal (at the top):
<img width="1338" height="658" alt="Image" src="https://github.com/user-attachments/assets/564fda5a-a9c2-419a-9ef6-8da16e2f05d2" />
Obscured (at the bottom):
<img width="970" height="442" alt="Image" src="https://github.com/user-attachments/assets/2ae27225-1ebc-42b1-b693-aa67e05aa7b1" />
This issue has 2 comments on GitHub. Read the full discussion on GitHub ↗