## Summary

- preserve Mermaid SVG viewBox dimensions so labels stay readable - contain wide diagrams in a keyboard-focusable horizontal scroller while keeping their full natural height - cover insertion, desktop and compact layouts, content rerenders, container resizes, keyboard scrolling, and reduced motion

## Before / after evidence

The design audit captures the original tiny-strip rendering: [desktop](https://github.com/githubnext/chopin/blob/maggie/design-audit/docs/design-audit/images/11-mermaid-preview-desktop.png) and [compact](https://github.com/githubnext/chopin/blob/maggie/design-audit/docs/design-audit/images/25-mermaid-preview-mobile.png).

| Width | Before | After | | --- | --- | --- | | 1440 viewport | 640 × 54.6 px SVG; effective labels 8.7 px; no internal overflow | 1173 × 100 px SVG at 16 px labels inside a 640 px scroller | | 390 viewport | 350 × 29.9 px SVG; effective labels 4.8 px; no internal overflow | 1173 × 100 px SVG at 16 px labels inside a 350 px scroller |

The browser assertions also verify that every node, edge, and label remains vertically contained after Mermaid source changes and viewport resizing.

## Verification

- bun test — 853 passed, 2 expected database skips - bun run types - bun run ci — 0 warnings, 0 errors - bun run build - focused browser suites — 30 passed - git diff --check