Repository navigation
Conversation
`withZoom` makes the content zoomable: click, double tap or Enter toggle 2×, the mouse wheel, a pinch and the `+`/`-` keys zoom up to 3×, dragging and the arrow keys move the zoomed content. Zoomed content may cover the whole screen. In a `LightBoxGallery` each item zooms on its own, and swiping and the arrow keys only page while the item is not zoomed. The gestures run on the host in the new generated `LightBoxZoom`, so the remote `LightBox` and the Vue rebuild only place it. A nested zoom (a gallery item's) switches the surrounding one off. The light box's actions (close and `ActionGroup`) move to the screen's top right corner, in one row with close last, and the gallery's arrows and indicators to the screen's edges at the same distance. Closes #3447 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Lisa18289
added
the
update-screenshots
github-actions
Bot
removed
the
update-screenshots
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
The actions now put the tunnelled `ActionGroup` before the close button. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
How the zoom is operated is quickly found out by using it. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
- A wheel or Safari gesture zoom focuses the zoom area, so the arrows
move a zoomed gallery item instead of paging
- Handle Safari's trackpad pinch (gesture events), which zoomed the page
- Leave Ctrl/Cmd/Alt key combinations to the browser (page zoom, history)
- `withZoom` always fits the content to the screen; with
`fitScreen={false}` the wheel zoomed instead of scrolling and the
zoomed content was clipped
- Gate the "LightBox" visual scenario for cross-version below 1.6.0: the
close button moved behind the `ActionGroup`
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
✅ Cross-Version Tests PassedThe current host still renders old published remote versions correctly (iframe) and in the same DOM shape (in-process). Iframe harness (attribute-accurate): ✅ passed In-process harness (structure-only): ✅ passed |
…m area The item remounts on paging, so a focused zoom area dropped the focus to the body. The light box's focus containment caught it a frame later, on whatever came first in the light box. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…o hooks maxScale was a remote property no caller passed; the zoom keeps 3 as its maximum. withZoom documents its default. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
The bounds were only recomputed during an interaction, so a smaller window left the zoomed content and its focus ring off screen. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…e-pr-3513-1e990b # Conflicts: # apps/remote-dom-demo/src/app/remote-vue/_demos/modal.tsx # apps/remote-dom-demo/src/app/remote/modal/page.tsx
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Focusing only on mount loses the focus to the dialog's autofocus, which broke the 'LightBox with Gallery' visual test. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Lisa18289
added a commit
that referenced
this pull request
Oct 27, 2026
Same line as #3513 on next, so the merge of main into next stays clean. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Lisa18289
marked this pull request as ready for review
October 27, 2026 09:18
- Page by swipe only on the release of the pointer that started it, so a button press after a pinch does not page back Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
mfal
reviewed
Oct 27, 2026
- Raise the maximum scale to an image's natural size, at least 3x - Mark LightBoxGalleryItem's withZoom as internal Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This branch has not been deployed
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.
Adds
withZoomtoLightBox, modelled on Mantine's lightbox zoom. Click, double tap or Enter toggle 2×; the mouse wheel, a pinch and+/-zoom up to 3×, or to an image's natural size if that is larger; dragging and the arrow keys move the zoomed content, which may cover the whole screen. In aLightBoxGalleryeach item zooms on its own, and swiping and the arrows only page while it is not zoomed.The gestures run on the host in the new generated
LightBoxZoom, so the remoteLightBoxand the Vue rebuild only place it. The zoom area is focusable, describes its keys to screen readers, and its focus ring follows what is on screen.Layout change for every light box: close and the
ActionGroupnow sit in one row in the screen's top right corner, close last, and the gallery's arrows and indicators sit at the screen's edges at the same distance. Hence the changed baselines; the Linux ones come fromupdate-screenshots.Closes #3447
🤖 Generated with Claude Code