Skip to content

🤖 fix: make mermaid diagram controls zoom#3433

Merged
coadler merged 1 commit into
mainfrom
fix/mermaid-zoom-controls
Jun 1, 2026
Merged

🤖 fix: make mermaid diagram controls zoom#3433
coadler merged 1 commit into
mainfrom
fix/mermaid-zoom-controls

Conversation

@coadler

@coadler coadler commented Jun 1, 2026

Copy link
Copy Markdown
Collaborator

Summary

Fixes #3425 by making the Mermaid diagram +/- controls scale the rendered SVG instead of only changing the diagram max-height.

Background

The previous controls changed a persisted max-height value. For diagrams already shorter than that cap, clicking +/- produced no visible change, which made the controls appear broken.

Implementation

  • Replace the Mermaid max-height state with clamped persisted zoom state.
  • Apply the zoom through a CSS variable on rendered Mermaid SVGs so the diagram visibly scales.
  • Switch Mermaid containers to bidirectional overflow so zoomed diagrams remain scrollable.
  • Mirror the CSS in the VS Code webview styles because it reuses the shared message renderer.
  • Add a focused regression test for the zoom controls and persisted value.

Validation

  • bun test src/browser/features/Messages/Mermaid.test.tsx
  • make typecheck
  • make lint
  • nix shell nixpkgs#shfmt nixpkgs#shellcheck nixpkgs#hadolint -c make static-check

Risks

Low. The change is scoped to Mermaid diagram controls and CSS. Existing SVG sanitization and rendering paths are unchanged.


Generated with mux • Model: openai:gpt-5.5 • Thinking: xhigh • Cost: 18011{MUX_COSTS_USD:-0.00}

Summary:
- Replace Mermaid diagram +/- max-height controls with persisted SVG zoom controls.
- Apply the zoom CSS in both desktop and VS Code webview styles.
- Add a regression test covering zoom state and persistence.

Validation:
- bun test src/browser/features/Messages/Mermaid.test.tsx
- make typecheck
- make lint
- nix shell nixpkgs#shfmt nixpkgs#shellcheck nixpkgs#hadolint -c make static-check

---

_Generated with `mux` • Model: `openai:gpt-5.5` • Thinking: `xhigh` • Cost: `17793{MUX_COSTS_USD:-0.00}`_

<!-- mux-attribution: model=openai:gpt-5.5 thinking=xhigh costs=0.00 -->
@coadler

coadler commented Jun 1, 2026

Copy link
Copy Markdown
Collaborator Author

@codex review

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. Delightful!

ℹ️ 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".

@coadler coadler added this pull request to the merge queue Jun 1, 2026
Merged via the queue into main with commit 56feb59 Jun 1, 2026
22 of 24 checks passed
@coadler coadler deleted the fix/mermaid-zoom-controls branch June 1, 2026 04:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

zoom in/out on mermaid diagram does nothing

1 participant