Fix code block overflow

What does this MR do and why?

Fixes code block overflow in Agentic chat

Screenshots or screen recordings

Before	After
Product

How to set up and validate locally

1. Go to http://localhost:9001/?path=/story/web-agentic-chat-webagenticduochat--interactive
2. Paste some HTMl code (example see below)

<p>// Your messages
  .duo-chat-message-container:has(.duo-chat-message .gl-avatar) {
    @apply gl-justify-end;</p>
<pre><code>.duo-chat-message {
  background-color: rgb(from var(--theme-accent-color) r g b / 15%);
  @apply gl-rounded-bl-[1rem] gl-rounded-br-none;
}
</code></pre>
<p>  }</p>
<p>  &amp;.gl-dark .duo-chat-message-container:has(.duo-chat-message.gl-text-feedback-info) {
    .duo-chat-message:not(:has(.error-icon)) {
      background-color: rgb(from var(--theme-accent-color) r g b / 30%);
    }
  }</p>
<p>  .duo-chat-message-container {
    .duo-chat-message:has(.error-icon) {
      @apply gl-bg-subtle;
    }
  }</p>

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to gitlab#548836 (closed)