Skip to content

fix(web): scrolling pans expanded images and Mermaid diagrams - #26630

Open
shivamhwp wants to merge 1 commit into
pingdotgg:mainfrom
shivamhwp:issue-watch/26611
Open

shivamhwp wants to merge 1 commit into
pingdotgg:mainfrom
shivamhwp:issue-watch/26611

Conversation

@shivamhwp

@shivamhwp shivamhwp commented Oct 28, 2026 •

Copy link
Copy Markdown
Collaborator

Unproven: physical Mac trackpad pinch and momentum. Desktop recordings use automated wheel input.

Closes #26611

Ordinary vertical scrolling in the expanded image viewer zoomed the content, including expanded Mermaid diagrams. The wheel handler now reserves zoom for pinch/Ctrl+wheel and leaves ordinary scrolling to the existing native scroll area. Horizontal and diagonal scrolling pan without changing the image scale.

This also changes plain mouse-wheel behavior from zoom to pan. Mouse users can zoom with Ctrl+wheel, click, or the existing keyboard controls. This changes scroll behavior and needs Theo's approval before merge.

The shared viewer covers web and Electron images and expanded Mermaid diagrams, including file previews. No native mobile code changes.

Evidence

Baseline 9e09926d97824179d97311d1a810c6b5bb60d2d1; fixed 2d9b7ab5b277953fdb589b467cb2a43e111bb798. Recorded on shiv, macOS 27.0.1 arm64, Electron 44.9.3 and Chromium 152.0.7977.167, with generated test data and isolated recorded app state.

Before, image scrolling changes zoom:

before-image-short.mp4

Before, Mermaid scrolling changes zoom:

before-mermaid-short.mp4

After, image scrolling pans at a fixed zoom, followed by drag, Ctrl+wheel, and reset:

after-image.mp4

After, Mermaid scrolling pans at a fixed zoom, followed by Ctrl+wheel, drag, and reset:

after-mermaid.mp4

Viewer captures, before and after. These use different zoom levels; the videos show scale staying fixed during scrolling.

Before
After

Validation

  • A real Chromium wheel-input regression fails on main because ordinary scrolling is canceled, then passes with the fix. It checks vertical, horizontal and diagonal panning, unchanged image scale during ordinary scrolling, and anchored Ctrl+wheel zoom.
  • On corex at the fixed commit, vp test run --project browser src/components/chat/ExpandedImageDialog.browser.test.tsx from apps/web passed both tests. vp run check:changed passed formatting, lint, both knip passes, affected-package typechecks and the focused browser tests.
  • Independent Codex review found no code or test issues. Corex's integrated browser panel was unavailable because of its host AppArmor setup.
  • On shiv, the real Electron app at the fixed commit passed vertical Mermaid panning, both grid pan axes, click and keyboard zoom/reset, drag, and Ctrl+wheel. Grid vertical wheel changed scrollTop from 616 to 856 and horizontal wheel changed scrollLeft from 868 to 1188 at an unchanged 300% zoom. Ctrl+wheel changed zoom to 448% while page scale stayed 1.
  • Baseline recordings used Cua OS wheel input. Fixed recordings use trusted Chromium CDP wheel input in the same Electron renderer because this app rejects Cua background wheel delivery. The fixed run preserved the physical pointer and focus. Unchanged server/desktop bundles were reused with the exact fixed Vite renderer. These are development app tests, not packaged-build tests.
  • Physical trackpad gestures, native macOS fullscreen Spaces, and useful horizontal overflow in the narrow Mermaid fixture were not verified. Diagonal scrolling is covered by the Chromium component regression, not the macOS recording.

Implemented by Opus 5.5 in Claude Code. Investigated, tested and reviewed by gpt-6.1-sol in Codex.

Every wheel event in the fullscreen image and Mermaid viewer zoomed, so a
Mac trackpad's two-finger scroll could not pan a zoomed image. Only
ctrlKey wheels (trackpad pinch, Ctrl+wheel) zoom now; plain wheels pan
through the viewport's native overflow scrolling.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@github-actions github-actions Bot added vouch:trusted PR author is trusted by repo permissions or the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Oct 28, 2026
@macroscopeapp

macroscopeapp Bot commented Oct 28, 2026

Copy link
Copy Markdown
Contributor

Approvability

Verdict: Needs Human Approval

Macroscope's review found this PR requires human approval — Ordinary scrolling now pans expanded images and Mermaid diagrams, while pinch or Ctrl+scroll zooms. A human should confirm this change to the viewer’s default scroll interaction.

You can add or adjust custom eligibility rules. Learn more.

@coderabbitai

coderabbitai Bot commented Oct 28, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
Commits

Reviewing files that changed from the base of the PR and between 9e09926 and 2d9b7ab.

Files selected for processing: 2
  • apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
  • apps/web/src/components/chat/ZoomableImage.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

Walkthrough

Ordinary wheel input now pans the image viewer without zooming. Ctrl+wheel zooms the image. The accessible description and browser test reflect these interactions.

Changes: Image viewer wheel interaction

Layer / File(s) Summary
Wheel interaction and regression coverage
apps/web/src/components/chat/ZoomableImage.tsx, apps/web/src/components/chat/ExpandedImageDialog.browser.test.tsx
The wheel handler zooms only for Ctrl+wheel and leaves ordinary wheel input available for panning. The accessible description identifies scrolling and dragging as pan controls. The browser test checks wheel cancellation, zoom, panning, and preservation of the image position under the viewport center during zoom.

Priority: Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Possibly related PRs

  • pingdotgg/t3code#25246: This PR changes the same image viewer wheel handler and adds browser-test coverage for its interaction behavior.

Suggested reviewers: juliusmarminge, t3dotgg

Merge Risk: Minimal · up to 2d9b7

Ordinary scrolling pans while Ctrl+scroll zooms. No actionable merge risk remains.

Pre-merge checks: Passed 4
Check name Status Explanation
Title check Passed The title clearly summarizes the primary behavior change: scrolling now pans expanded images and Mermaid diagrams.
Linked Issues check Passed [#26611] requires that ordinary trackpad or wheel scrolling in the expanded Mermaid and image viewer pan the content, and that pinch zoom still zoom it. At the reviewed head, ZoomableImage.tsx chang…
Out of Scope Changes check Passed The reviewed diff from merge base 9e09926d to head 2d9b7ab5 touches two files. ZoomableImage.tsx changes the wheel handler so only Ctrl+wheel zooms. It also updates the aria-description to nam…
Description check Passed The description states the purpose clearly: plain wheel input in the expanded image and Mermaid viewer currently zooms, and the fix limits zoom to pinch and Ctrl+wheel so ordinary scrolling pans throu…
Full details: Linked Issues check

Explanation

[#26611] requires that ordinary trackpad or wheel scrolling in the expanded Mermaid and image viewer pan the content, and that pinch zoom still zoom it. At the reviewed head, ZoomableImage.tsx changes the viewport wheel listener to return early unless event.ctrlKey is set. Ordinary wheel events are no longer canceled or converted to zoom, so the overflow-auto viewport handles them through native scrolling. Trackpad pinch on macOS Chromium and Safari arrives as a ctrlKey wheel event, so pinch zoom stays active. The Ctrl+wheel zoom factor stays at 0.01, as before. The browser regression in ExpandedImageDialog.browser.test.tsx checks that plain wheel input is not canceled, that image scale stays fixed during vertical, horizontal and diagonal panning, and that Ctrl+wheel zoom is anchored to the pointer. The PR also reports Electron checks for Mermaid panning and zoom controls. The PR recordings show the before and after behavior. The source diff does not directly show that the expanded Mermaid view uses ZoomableImage. This link rests on the PR description and the before-Mermaid recording. Physical trackpad pinch and momentum were not verified, and that gap is not a coding requirement failure. Non-coding items, such as the approval note from Theo, do not apply here.

Full details: Out of Scope Changes check

Explanation

The reviewed diff from merge base 9e09926d to head 2d9b7ab5 touches two files. ZoomableImage.tsx changes the wheel handler so only Ctrl+wheel zooms. It also updates the aria-description to name pinch, Ctrl+scroll, and scroll or drag. The aria text supports the changed input model and is not unrelated. ExpandedImageDialog.browser.test.tsx adds one regression test for the new behavior. Test code supports the requirement. The removed plain-wheel zoom branch is the behavior that #26611 asks to change. No unrelated files or features appear in the diff. The plain-wheel-to-pan change is a deliberate behavior change that the PR states, and the issue requests it. The PR notes that the change needs owner approval before merge. That note is a process condition, not a code scope issue.

Full details: Description check

Explanation

The description states the purpose clearly: plain wheel input in the expanded image and Mermaid viewer currently zooms, and the fix limits zoom to pinch and Ctrl+wheel so ordinary scrolling pans through the native scroll area. It names the linked issue (#26611), the affected surfaces (web and Electron images, expanded Mermaid diagrams, file previews), and flags the behavior change and the need for maintainer approval. Verification is detailed: a Chromium browser regression that fails on main and passes with the fix, a focused vitest run, check:changed, Electron checks on macOS, before/after recordings and captures, and explicit gaps (physical trackpad, macOS fullscreen Spaces, packaged builds). The template's Scope and approval section is only partly satisfied, because the description requests approval from Theo but does not link a triaged issue or approval comment for the direction. The Problem and Change headings are not used as separate sections, though the content for both appears in the opening paragraphs. Those gaps are minor, so the description is mostly complete.

Finishing Touches
🧪 Generate unit tests (beta)
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@shivamhwp

Copy link
Copy Markdown
Collaborator Author

[gpt-6.1-sol][Codex] on behalf of shivam.

Before and after evidence for this PR. Generated test data only; macOS 27.0.1, Electron 44.9.3. Baseline 9e09926d97824179d97311d1a810c6b5bb60d2d1, fixed 2d9b7ab5b277953fdb589b467cb2a43e111bb798.

Before, image scrolling changes zoom:

before-image-short.mp4

Before, Mermaid scrolling changes zoom:

before-mermaid-short.mp4

After, scrolling pans the image at a fixed zoom, followed by other zoom and pan controls:

after-image.mp4

After, scrolling pans the Mermaid diagram at a fixed zoom, followed by other zoom and pan controls:

after-mermaid.mp4

Viewer captures use different zoom levels; the videos establish scale preservation during scrolling.

Before
After

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS 0-9 changed lines (additions + deletions). vouch:trusted PR author is trusted by repo permissions or the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Scrolling with Mac trackpad in fullscreened Image view/Mermaid diagram should move the content instead of zooming

1 participant