Issue Station
Sign In
Tools hereToolbox

claude-code - 💡(How to fix) Fix [BUG] Horizontal scrollbar appears in panel mode due to missing horizontal padding in webview container [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
anthropics/claude-code#49677•Fetched 2026-04-17 08:34:26
View on GitHub
Comments
1
Participants
2
Timeline
6
Reactions
0
Author
jonbernajonberna
Participants
github-actions[bot]github-actions[bot]jonbernajonberna
Timeline (top)
labeled ×5commented ×1

Error Message

Error Messages/Logs

Root Cause

When Claude Code is configured with "claudeCode.preferredLocation": "panel" and VS Code is running a multi-pane grid layout, a horizontal scrollbar appears at the bottom of each Claude Code panel. The scrollbar is not caused by content overflow from long lines — it appears to be the webview container itself being a few pixels wider than its available space, with no horizontal padding to absorb the difference.

RAW_BUFFERClick to expand / collapse

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?

When Claude Code is configured with "claudeCode.preferredLocation": "panel" and VS Code is running a multi-pane grid layout, a horizontal scrollbar appears at the bottom of each Claude Code panel. The scrollbar is not caused by content overflow from long lines — it appears to be the webview container itself being a few pixels wider than its available space, with no horizontal padding to absorb the difference.

What Should Happen?

No horizontal scrollbar. A small amount of horizontal padding (e.g. padding: 0 8px) on the webview container would prevent the overflow from triggering the scrollbar.

Error Messages/Logs

Steps to Reproduce

  1. Set "claudeCode.preferredLocation": "panel" in VS Code settings
  2. Open 2 or more editor groups (e.g. a 2x2 grid layout)
  3. Open Claude Code in each panel
  4. Observe horizontal scrollbar at the bottom of each Claude Code pane

Claude Model

None

Is this a regression?

I don't know

Last Working Version

No response

Claude Code Version

2.1.112

Platform

Anthropic API

Operating System

Windows

Terminal/Shell

VS Code integrated terminal

Additional Information

  • "editor.scrollbar.horizontal": "hidden" does not affect the scrollbar as it is inside the webview sandbox
  • CSS injection via Apc Customize UI++ and vscode-custom-css cannot reach inside the webview iframe
  • The scrollbar disappears if the panel is given additional width, confirming it is a few-pixel overflow issue rather than a content wrapping problem
  • Suggested fix: add padding: 0 8px or similar to the Claude Code webview container element

extent analysis

TL;DR

Add horizontal padding to the Claude Code webview container element to prevent the horizontal scrollbar from appearing.

Guidance

  • Verify that the issue is indeed caused by a few-pixel overflow by checking if adding width to the panel removes the scrollbar.
  • Attempt to add padding to the webview container element using available customization options, such as CSS injection (although it's noted that this may not be possible due to the webview sandbox).
  • Consider reaching out to the developers of Claude Code or VS Code to request a fix or provide more information on how to customize the webview container.
  • Check if there are any other settings or configurations in VS Code or Claude Code that could be contributing to the issue.

Example

No code example is provided as the issue does not imply a specific code solution, but rather a CSS styling fix.

Notes

The issue seems to be specific to the Claude Code webview container and its interaction with the VS Code multi-pane grid layout. The suggested fix of adding padding to the container element may not be possible through standard customization options due to the webview sandbox.

Recommendation

Apply workaround: Add padding to the webview container element if possible, or wait for a potential fix from the developers. The reason is that the issue is likely caused by a minor styling oversight, and adding padding is a straightforward solution that can be implemented if the necessary customization options are available.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#api#retrieval issue#search optimization#API routing#API middleware

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

claude-code - 💡(How to fix) Fix [BUG] Horizontal scrollbar appears in panel mode due to missing horizontal padding in webview container [1 comments, 2 participants]