Fix Mermaid overflow in ExperimentSummary (constrain rendered SVGs)

[wsxiaolin]

Motivation

• Mermaid-rendered diagrams and some SVG/img content in the rich-text intro could be wider than the container and force the ExperimentSummary layout to expand horizontally.
• Constrain rendered content so oversized Mermaid diagrams scroll internally instead of stretching the summary/right column.

Description

• Add constrained styling for the intro rich-text block (.intro) including max-width: 100%, min-width: 0, and overflow-wrap: anywhere to prevent children from expanding the container.
• Ensure images and SVGs inside the intro honor max-width: 100% and height: auto so they scale down responsively.
• Add .mermaid-diagram rules to make rendered Mermaid diagrams display as block-level elements with max-width: 100%, internal horizontal scrolling (overflow-x: auto), and force the inner SVG to use width: auto !important and max-width: 100% !important.
• Minor template formatting cleanup of the avatar container markup in src/views/ExperimentSummary.vue for consistent inline styles.

Testing

• Ran npm run build and the build completed successfully.
• Ran npx prettier --write src/views/ExperimentSummary.vue and git diff --check with no issues reported.
• Started a local dev server (npm run dev) and verified layout changes in-browser.
• Performed a Playwright smoke check that injects an oversized Mermaid-like SVG into the intro area and measured container widths; results showed the diagram and intro stayed within the viewport (no overflow).

---

Codex Task

[wsxiaolin]

@codex

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 0f66a90f98

ℹ️ About Codex in GitHub

Your team has set up Codex to 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 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[wsxiaolin]

@codex

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 23c3b29ce6

ℹ️ About Codex in GitHub

Your team has set up Codex to 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 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Preserve Mermaid SVG width for scrolling

For the default Mermaid output I inspected, the SVG is emitted as width="100%" with an inline max-width: <diagram width>px; this rule overrides both with width: auto and max-width: none. In browsers that leaves the inline SVG with no concrete rendered width other than its intrinsic/fallback sizing, so large Mermaid charts in the Intro tab are shrunk instead of keeping their full diagram width inside the overflow-x: auto wrapper, making the intended horizontal scroll unavailable and wide diagrams hard to read.

Useful? React with 👍 / 👎.