Chat Item Display Issue in VS Code Copilot When HTML Tags start the Input

[g122622]

Does this issue occur when all extensions are disabled?: Yes

Title:

Chat Item Display Issue in VS Code Copilot When HTML Tags start the Input

This issue affects the readability and usability of the chat interface in VS Code Copilot, as text input starting with HTML tags like <span>, <div>, <img>, etc., causes rendering problems that make parts of the user's message overlap with the chat-attached-context element.
![[Snipaste_2025-03-11_00-18-53.png]]

Steps to Reproduce:

1. Open a chat session in the VS Code Copilot (not "Copilot Edits").
2. Input a message beginning with an HTML tag (e.g., <div>example). Ensure the HTML tag is at the very start of the input text.
3. Observe that the height of the text area does not adjust properly, causing the lower part of the text to overlap with the chat-attached-context element.

Expected Behavior:

The chat item should correctly calculate its height based on the content, ensuring that all parts of the user's message are clearly visible and do not overlap with other elements.

Actual Behavior:

When the input starts with an HTML tag, the rendering height of the text area is too low, leading to a portion of the text overlapping with the chat-attached-context element. This issue does not occur if HTML tags are used but not at the beginning of the text.

Additional Information:

• Does this issue occur when all extensions are disabled?: Yes

VS Code Version

• Version: 1.97.2 (system setup)
• Commit: e54c774
• Date: 2025-02-12T23:20:35.343Z
• Electron: 32.2.7
• ElectronBuildId: 10982180
• Chromium: 128.0.6613.186
• Node.js: 20.18.1
• V8: 12.8.374.38-electron.0
• OS: Windows_NT x64 10.0.26100

This issue can also be reproduced in this new dev version：

• Version: 1.99.0
• Commit: Unknown
• Date: Unknown
• Electron: 32.2.7
• ElectronBuildId: undefined
• Chromium: 128.0.6613.186
• Node.js: 20.18.1
• V8: 12.8.374.38-electron.0
• OS: Windows_NT x64 10.0.26100

OS Version:

Windows 11 24H2