bug: Mermaid diagrams shrink until unreadable in plan review UI

[blimmer]

What happened?

Wide Mermaid diagrams in the plan review UI render so small that node labels and edge labels are effectively unreadable. The diagram is placed inside the normal plan content column and appears to be scaled down to fit the available width instead of preserving a readable natural size with horizontal scrolling or zoom controls.

This was observed with a wide architecture flowchart like:

flowchart TD
  U[User] --> W[PatchWave web UI]

  W --> C[Clerk]
  C -->|Clerk session cookie / JWT| W
  C -->|user.created / user.updated webhook| PW[PatchWave webhook endpoint]
  PW --> DB[(PatchWave DB)]

  W -->|authenticated request| API[PatchWave app/API]
  API -->|verify Clerk session| C
  API --> DB

  subgraph GitHub Integration
    W -->|Install GitHub App| GHInstall[GitHub App installation flow]
    GHInstall -->|installation_id + setup redirect| API
    API -->|GitHub App OAuth code exchange if user token needed| GHOAuth[GitHub OAuth for GitHub App]
    GHOAuth -->|GitHub App user access token + refresh token| API
    API -->|store encrypted refresh token if needed| DB

    GHWebhook[GitHub webhooks] --> GHW[PatchWave GitHub webhook listener]
    GHW --> DB

    Worker[PatchWave background worker] -->|app JWT + installation_id| GHApp[GitHub App installation token]
    GHApp -->|short-lived installation access token| Worker
    Worker -->|merge/comment/read PRs as PatchWave app bot| GitHub[GitHub API]
  end

Loading

contextbridge version

v0.9.2-alpha.0, as shown in the plan review UI header.

Operating system

macOS

Steps to reproduce

1. Open the plan review UI with markdown content that includes the Mermaid flowchart above.
2. Let the Mermaid block render in the annotation view.
3. Compare the rendered diagram text to surrounding plan prose.

What did you expect to happen?

The Mermaid diagram should remain readable. For wide diagrams, the UI should preserve a useful natural size and provide horizontal scrolling and/or zoom controls instead of forcing the entire SVG to fit the prose column.

The Storybook Mermaid example should also include a wide diagram so this behavior is easy to inspect manually and catch in visual review.

What actually happened?

The entire diagram was scaled down inside the plan content column. Node labels and edge labels became too small to read, making the diagram effectively unusable for review.

A likely source is the Mermaid block wrapper in packages/annotation/src/element/mermaid/MermaidBlock.tsx, which currently applies overflow-x-auto but also clamps nested SVGs with max-w-full. Mermaid commonly emits responsive SVG sizing, so the diagram shrinks to fit rather than overflowing at a readable size.

Browser and version

Chromium-based browser; exact version not captured.

Anything else

Desired improvement: add readable default sizing and likely a compact zoom toolbar for Mermaid diagrams. Mermaid has a useMaxWidth sizing option, but it does not appear to provide built-in interactive zoom/pan controls, so a small local toolbar may still be needed.