[BUG] Regression: Claude Code VS Code webview CSS/layout broken after latest extension update
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
After updating the Claude / Claude Code VS Code extension, the extension UI layout became broken.
Buttons, icons, text, and input elements are incorrectly positioned and overlap each other.
This issue started immediately after the latest extension update.
Symptoms
- Toolbar buttons are misaligned
- Icons and buttons overlap
- Text is positioned incorrectly
- Some controls appear partially outside their containers
- Chat welcome screen layout is broken
- Input/action controls are rendered in incorrect positions
For example, text such as:
Type /model to pick the right tool for the job.
and the Sonnet 5.5 welcome content render incorrectly, while the toolbar at the top is heavily misaligned.
Expected behavior
The Claude panel should render with the normal layout, with toolbar buttons, chat content, and input controls correctly positioned.
Actual behavior
The entire Claude webview appears to have broken CSS/layout after the update.
Troubleshooting attempted
- Reloaded VS Code window
- Reset VS Code zoom level
- Closed and reopened the Claude panel
- Restarted VS Code
The problem persists.
Environment
- OS: Windows 10/11
- VS Code: 1.140.0
- Claude / Claude Code extension: 2.1.288
- Theme: Dark
- Display scaling: [100% / 125% / etc.]
Additional information
The problem appeared only after updating the extension. It was rendering correctly before the update.
Screenshots attached.
<img width="456" height="970" alt="Image" src="https://github.com/user-attachments/assets/445ab0a0-2cc8-4a1f-8ae4-4dbabe142b30" />
<img width="445" height="420" alt="Image" src="https://github.com/user-attachments/assets/01bd6921-5934-41b8-b460-584daac21b4b" />
What Should Happen?
The Claude Code panel should render normally after the extension update.
All toolbar buttons, icons, text, and input controls should be correctly aligned and contained within their respective UI elements.
The layout should look the same as before the update, without overlapping, clipped, or misplaced elements.
Error Messages/Logs
Steps to Reproduce
- Open Visual Studio Code on Windows.
- Install or update the Claude Code extension to the latest version.
- Open the Claude Code panel.
- Start a new chat or open the default welcome screen.
- Observe that toolbar buttons, icons, text, and controls are incorrectly positioned and overlap each other.
The issue appeared immediately after updating the extension. Restarting VS Code, reloading the window, and resetting the zoom level did not fix it.
Claude Model
_No response_
Is this a regression?
Yes, this worked in a previous version
Last Working Version
_No response_
Claude Code Version
2.1.288
Platform
Anthropic API
Operating System
Windows
Terminal/Shell
VS Code integrated terminal
Additional Information
_No response_