[BUG][VS Code Extension] Code block background only renders under text, not full block width in chat panel
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?
Description
Component: VS Code Extension Chat Panel
When viewing code blocks in the Claude Code VS Code extension's chat panel, the background color is only applied directly behind the text characters instead of rendering as a full-width block container. This makes code blocks less visually distinct from regular chat text.
<img width="742" height="428" alt="Image" src="https://github.com/user-attachments/assets/47671e74-9c03-407e-a8a7-92246b81baa0" />
Technical Details
This appears to be a CSS/webview styling issue where the <pre> or code block container element is not receiving the background-color property on the full width, but instead only the inline text elements are styled. The chat panel's markdown renderer should apply background styling to the entire code block container, not just the text spans.
What Should Happen?
Code blocks should render with a solid background color that spans the full width of the chat panel, similar to how markdown code blocks appear in GitHub, GitLab, or standard markdown renderers.
Expected:
┌───────────────────────────────────────────┐
│ // Full block background across width │
│ const code = "properly styled"; │
│ │
└───────────────────────────────────────────┘
Error Messages/Logs
Claude Code for VS Code
Installation
Identifier
anthropic.claude-code
Version
2.1.11
Steps to Reproduce
Open VS Code with Claude Code extension installed
Open the Claude Code chat panel (click Claude icon in sidebar)
Start a conversation and ask Claude to generate a code block
Observe that the code block background only highlights the text itself, not the full container width
Claude Model
Sonnet (default)
Is this a regression?
No, this never worked
Last Working Version
_No response_
Claude Code Version
2.1.9 (Claude Code)
Platform
AWS Bedrock
Operating System
macOS
Terminal/Shell
VS Code integrated terminal
Additional Information
VS code About
Version: 1.108.1 (Universal)
Commit: 585eba7c0c34fd6b30faac7c62a42050bfbc0086
Date: 2026-01-14T14:55:44.241Z
Electron: 39.2.7
ElectronBuildId: 12953945
Chromium: 142.0.7444.235
Node.js: 22.21.1
V8: 14.2.231.21-electron.0
OS: Darwin arm64 25.2.0This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗