claude-code - 💡(How to fix) Fix [BUG] Horizontal scrollbar appears in sidebar chat panel (other extensions don't have this) [1 comments, 2 participants]

TL;DR

Apply CSS styles to the chat container in the webview panel to prevent horizontal scrolling.

Guidance

• Investigate adding overflow-x: hidden or word-break: break-word to the chat container's CSS styles to mimic the behavior of Qwen Code and Kilo Code.
• Verify that the CSS change does not introduce any unwanted side effects, such as truncating important content.
• Check the webview panel's HTML structure to ensure the CSS styles are applied to the correct container.
• Test the fix with various types of long content, including code identifiers, log output, and file paths.

Example

.chat-container {
  overflow-x: hidden;
  word-break: break-word;
}

Note: This example assumes the chat container has a class named chat-container. The actual class name or selector may vary.

Notes

The fix may require adjusting the CSS styles in the webview panel, which could have unintended consequences if not done carefully. It's essential to test the change thoroughly to ensure it resolves the issue without introducing new problems.

Recommendation

Apply workaround: Add the suggested CSS styles to the chat container, as it is a targeted fix that addresses the specific issue without requiring a version upgrade.