fix: prevent invalid HTML nesting from fenced code blocks breaking layout

[octo-patch]

Fixes #8290

Problem

In react-markdown v10, fenced code blocks with a language specifier (e.g. ```bash) are handled by the custom MarkdownCode component, which renders a CodeBlock — a <div>-based component using SyntaxHighlighter with PreTag="div".

However, react-markdown wraps all block code elements with a default <pre> element when components.pre is not customized. This creates invalid HTML:

<pre>      <!-- react-markdown default -->
  <div>  <!-- CodeBlock / SyntaxHighlighter with PreTag="div" -->
    <code>...</code>
  </div>
</pre>

Browsers auto-correct <div> inside <pre> by moving the <div> outside the <pre>, which disrupts the layout of surrounding text content. This explains why fenced code blocks sometimes break the message layout — the issue appears whenever a response contains code blocks with a language specifier.

Solution

Add pre: ({ children }) => <>{children}</> to the components prop of ReactMarkdown. This strips the default <pre> wrapper, letting the CodeBlock component render its own block-level presentation (via SyntaxHighlighter with PreTag="div") without being wrapped in an invalid <pre> element.

Testing

• Added two new tests to MarkdownContent.test.tsx:
  1. Verifies no <pre> elements remain in the DOM for a single code block
  2. Verifies multiple fenced code blocks render correctly alongside surrounding text (reproducing the reporter's exact example)
• All 26 existing tests continue to pass

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 804b0fbe26

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

[chatgpt-codex-connector]

Preserve <pre> for code fences without a language tag

Unwrapping every pre node here breaks fenced code blocks that omit a language specifier. MarkdownCode only uses CodeBlock when className matches language-*, so no-language fences fall back to a plain <code> element; with this unconditional pre removal, those blocks lose their block container and render like inline code (no block layout/overflow behavior). This is a functional regression for common markdown like triple backticks without a language.

Useful? React with 👍 / 👎.