feat: add fullscreen zoom modal for images and Mermaid diagrams#135
Merged
k1LoW merged 4 commits intok1LoW:mainfrom Mar 24, 2026
Merged
feat: add fullscreen zoom modal for images and Mermaid diagrams#135k1LoW merged 4 commits intok1LoW:mainfrom
k1LoW merged 4 commits intok1LoW:mainfrom
Conversation
Click images or Mermaid diagrams to open a fullscreen overlay with zoom (mouse wheel) and pan (drag) support. Close via ESC, backdrop click, or X button. Uses react-zoom-pan-pinch for zoom/pan controls. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…gation - Add role="dialog", aria-modal, aria-label for screen readers - Add aria-hidden to close button SVG icon - Add onError fallback for image load failure in size measurement - Extract calcScale helper to eliminate duplicate scale calculation - Add preventDefault + stopPropagation on image click to prevent link navigation when image is inside an anchor tag Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace onClick with onMouseDown/onMouseUp to distinguish clicks from drag-pan operations. Clicks on the actual content (image/SVG) no longer close the modal, while clicks on the dark backdrop area do. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Owner
|
@harakeishi That's an excellent feature! How about adding the Zoom button to the list of buttons in the top-right corner of the image? Please leave the button's icon as a placeholder. I'll likely adjust it later. |
Replace mouse click zoom trigger on images and Mermaid diagrams with dedicated Zoom buttons that appear on hover, matching the existing copy button pattern. This aligns with GitHub's web UI convention of not assigning zoom to mouse clicks. Icon is a placeholder (magnifying glass with +) to be adjusted later. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
Author
|
Thank you for the review! Addressed in a27d678 — replaced click-to-zoom with dedicated Zoom buttons on hover. Summary video has been updated as well. |
Owner
|
Thank you!!! |
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
react-zoom-pan-pinchrole="dialog",aria-modal, keyboard supportDetails
ZoomModalcomponent rendered atApplevel, decoupled fromMarkdownViewerMarkdownViewerreceives an optionalonZoomcallback — no behavioral change when omittede.preventDefault()+e.stopPropagation()on image click to prevent link navigation for linked images ([](url))initialScale=1on image load error2026-03-24.15.13.23.mov
Test plan