This PR Fixes Issue #243134 : Chat Item Display Issue in VS Code Copilot When HTML Tags Start the Input

[g122622]

This PR Fixes Issue #243134 : Chat Item Display Issue in VS Code Copilot When HTML Tags Start the Input

Overview

In the src\vs\workbench\contrib\chat\browser\media\chat.css file, the original styles for .interactive-item-container .value .rendered-markdown and its child p elements caused layout issues when messages started with HTML tags. Specifically, the lack of a bottom margin on the .rendered-markdown class and excessive margins on the p elements inside it contributed to the text overlapping with the chat-attached-context element.

Original CSS:

// original src\vs\workbench\contrib\chat\browser\media\chat.css
.interactive-item-container .value .rendered-markdown {
	line-height: 1.5em;
}

.interactive-item-container .value > .rendered-markdown p {
	margin: 0 0 16px 0;
}

Changes

To address this issue, I have made adjustments to the CSS rules for .interactive-item-container .value .rendered-markdown and its child p elements. The primary change involves adding a bottom margin to .rendered-markdown to ensure proper spacing below the content, and removing the bottom margin from the p elements within it to avoid excessive space.

Modified CSS:

// modified src\vs\workbench\contrib\chat\browser\media\chat.css
.interactive-item-container .value .rendered-markdown {
	line-height: 1.5em;
	margin-bottom: 16px;
}

.interactive-item-container .value > .rendered-markdown p {
	margin: 0;
}

Testing

I tested these changes by reproducing the original issue using various inputs starting with HTML tags in the VS Code Copilot's chat interface. After applying the modifications, the text no longer overlaps with the chat-attached-context element, and all parts of the user's message are clearly visible.