claude-code - 💡(How to fix) Fix [BUG] Conversation fade-gradient overlays the vertical scrollbar in the VSCode extension

Preflight Checklist

• I have searched existing issues and this hasn't been reported yet
• This is a single bug report (please file separate reports for different bugs)
• 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

1. Open the Claude Code panel in VSCode and start a conversation long enough to require vertical scrolling.
2. Look at the vertical scrollbar on the right edge of the conversation. Compare its color near the top vs. near the bottom.
3. 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).
4. 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" />