Full screen view for Mermaid diagrams#4275
Merged
gregberge merged 5 commits intoMay 28, 2026
Merged
Conversation
The portaled popper wrapper would otherwise sit over the trigger and steal pointer events (e.g. hover-revealed controls). A scoped global rule makes that wrapper pointer-transparent for these tooltips only. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Enlarge a Mermaid diagram into a centered dialog from a control in the bottom-right toolbar. Closes on click outside, Escape, or the reduce control, with enter/exit animations. The live diagram is reparented (not re-rendered) so panzoom and the SVG are preserved, and the inline slot reserves its height to avoid a layout jump. Uses react-aria FocusScope and usePreventScroll. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
🦋 Changeset detectedLatest commit: 19f2b55 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds a fullscreen dialog experience for Mermaid diagrams (with pan/zoom controls) and updates the Tooltip primitive to support truly non-interactive tooltip content so tooltips don’t steal pointer events from hover-revealed controls.
Changes:
- Add a fullscreen toggle to Mermaid diagram controls and render the fullscreen UI in a centered, scroll-locking dialog portaled to
document.body. - Preserve the Mermaid SVG and panzoom instance when entering/exiting fullscreen (intended to avoid re-render/flicker).
- Make
Tooltipcontent non-interactive whendisableHoverableContentis set, including a global CSS rule to prevent Radix’s portaled wrapper from intercepting pointer events.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/gitbook/src/components/RootLayout/globals.css | Adds a global selector to disable pointer events on Radix tooltip wrappers that contain non-interactive tooltip content. |
| packages/gitbook/src/components/primitives/Tooltip.tsx | Adds a data-non-interactive marker + inline styles when disableHoverableContent is set. |
| packages/gitbook/src/components/primitives/Button.tsx | Passes tooltip contentProps through without cloning/spreading. |
| packages/gitbook/src/components/DocumentView/CodeBlock/MermaidPanZoomControls.tsx | Reworks the controls into a compact toolbar and adds fullscreen toggle support. |
| packages/gitbook/src/components/DocumentView/CodeBlock/MermaidCodeBlock.tsx | Implements fullscreen dialog rendering, scroll lock, Escape/click-outside close, and diagram “reparenting” behavior. |
| packages/gitbook/package.json | Adds react-aria for FocusScope and usePreventScroll. |
| bun.lock | Updates lockfile entries (incl. turbo bump and react-aria). |
| .changeset/tooltip-non-interactive.md | Adds changeset for the Tooltip non-interactive behavior change. |
| .changeset/mermaid-fullscreen.md | Adds changeset for the Mermaid fullscreen feature. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Addresses review: spreading caller `style` after `pointerEvents: none` let a caller set it back to `auto`. Spread caller style first, force the non-interactive properties last. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Addresses review: instead of manually appendChild-ing a React-managed node between the inline slot and the dialog, the diagram subtree is now portaled into a stable, React-uncontrolled host node. Only that plain node is moved between hosts, so React keeps full control of the subtree and the portal target never changes (panzoom and the SVG are preserved, no remount). Also softens the controls toolbar (drop border/shadow, lighter translucent background) so it reads as part of the diagram rather than a floating card. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
Author
No we don't care in GBX. |
gregberge
deleted the
greg/rnd-11082-enlargefullscreen-view-for-mermaid-diagrams
branch
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
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.
Overview
Mermaid diagrams can be hard to read inline when they're large. This adds a fullscreen view: a control in the diagram's bottom-right toolbar opens the diagram in a centered dialog where it can be panned and zoomed comfortably.
CleanShot.2026-05-27.at.18.54.21.mp4
What's new
How it works
document.bodyso it escapes any transformed/clipping ancestor and reliably covers the viewport.react-ariaprovidesFocusScope(focus containment + restore) andusePreventScroll(robust scroll lock, incl. scrollbar width / iOS).Tooltip primitive change (separate commit)
The control tooltips exposed a pre-existing issue: Radix renders tooltip content in a portaled
[data-radix-popper-content-wrapper]outside the diagram, and—being pointer-interactive—it stole the hover that reveals the controls, causing a flicker loop.Tooltipnow makes its content non-interactive wheneverdisableHoverableContentis set (marks it withdata-non-interactive+ a scoped global rule setspointer-events: noneon that wrapper). This is a generic primitive improvement, reusable by any tooltip, not a Mermaid-specific hack.Testing