[BUG][VS Code Extension] Code block background only renders under text, not full block width in chat panel

Resolved 💬 3 comments Opened Jan 17, 2026 by tin-trinh Closed Jan 20, 2026

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.0

View original on GitHub ↗

This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗