Skip to content

Mermaid UI: fix Copy button visibility, toolbar order, modal size, and modal Copy action#27

Merged
ThisIs-Developer merged 2 commits into
mainfrom
copilot/fix-copy-button-toolbar-order
Mar 1, 2026
Merged

Mermaid UI: fix Copy button visibility, toolbar order, modal size, and modal Copy action#27
ThisIs-Developer merged 2 commits into
mainfrom
copilot/fix-copy-button-toolbar-order

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 1, 2026

Several Mermaid diagram UI issues: the inline toolbar Copy button lacked a text label, toolbar button order was wrong, the zoom modal was undersized, and the modal had no Copy action.

Changes

Inline diagram toolbar (script.js)

  • Copy button label: was icon-only (bi-clipboard-image); now renders <i> Copy with visible text
  • Button order: reordered appends to enforce Zoom → Copy → PNG → SVG

Zoom modal size (styles.css)

  • .mermaid-modal-content changed from max-width/max-height: 92vw/92vh (content-sized) to explicit width: 85vw; height: 85vh
  • Added @media (max-width: 576px) breakpoint: 95vw × 90vh

Zoom modal toolbar (index.html + script.js)

  • Added #mermaid-modal-copy button between Reset and PNG → order is now Zoom In → Zoom Out → Reset → Copy → PNG → SVG
  • Handler copies the modal SVG as PNG to the clipboard, shows Copied! feedback for 1800 ms, then reverts — matching the pattern of the inline copyMermaidImage helper

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link
Copy Markdown

vercel Bot commented Mar 1, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
markdown-viwer Ready Ready Preview, Comment Mar 1, 2026 2:51pm

…al copy button

Co-authored-by: ThisIs-Developer <109382325+ThisIs-Developer@users.noreply.github.com>
@cloudflare-workers-and-pages
Copy link
Copy Markdown

cloudflare-workers-and-pages Bot commented Mar 1, 2026

Deploying markdown-viewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3abcdd7
Status: ✅  Deploy successful!
Preview URL: https://855a2068.markdown-viewer.pages.dev
Branch Preview URL: https://copilot-fix-copy-button-tool.markdown-viewer.pages.dev

View logs

Copilot AI changed the title [WIP] Fix copy button visibility and toolbar order Mermaid UI: fix Copy button visibility, toolbar order, modal size, and modal Copy action Mar 1, 2026
@cloudflare-workers-and-pages
Copy link
Copy Markdown

Deploying markdownviewer with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3abcdd7
Status: ✅  Deploy successful!
Preview URL: https://fee05b31.markdownviewer.pages.dev
Branch Preview URL: https://copilot-fix-copy-button-tool.markdownviewer.pages.dev

View logs

@ThisIs-Developer ThisIs-Developer marked this pull request as ready for review March 1, 2026 14:53
@ThisIs-Developer ThisIs-Developer merged commit efa5f2b into main Mar 1, 2026
5 of 6 checks passed
@ThisIs-Developer ThisIs-Developer deleted the copilot/fix-copy-button-toolbar-order branch March 1, 2026 14:53
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.

2 participants