fix: prevent code block overflow in MarkdownText for long lines

[Copilot]

Code fences (```) in interaction bodies caused horizontal overflow and broke the interaction card layout, since <pre> defaults to white-space: pre (no wrapping).

Changes

• MarkdownText.tsx — register a custom pre renderer in react-markdown's components prop that applies white-space: pre-wrap and overflow-wrap: break-word; style object extracted to a module-level constant to avoid per-render allocation

const preStyle = { whiteSpace: 'pre-wrap' as const, overflowWrap: 'break-word' as const };

// inside components prop:
pre: ({ children }) => <pre style={preStyle}>{children}</pre>,

[Copilot]

Pull request overview

This PR updates the trainee profile’s Markdown rendering to prevent long code-fence lines from causing horizontal overflow that breaks the interaction card layout.

Changes:

• Add a custom pre renderer to react-markdown that applies wrapping styles (white-space: pre-wrap, overflow-wrap: break-word) to code blocks.
• Extract the <pre> style object to a module-level constant to avoid re-allocating it on each render.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[dojo-security-review]

✅ Security Review — no issues found

Generated by PR Security Review for issue #335 · ● 76.5K · ◷