[shivamhwp]

Problem

Plain scrolling in the expanded image viewer zoomed instead of moving the image, so a zoomed image or Mermaid diagram could not be panned with a trackpad or wheel.

Closes #26611

Change

• Only pinch and Ctrl+wheel zoom (both arrive as a ctrlKey wheel event).
• Plain wheel scrolling, vertical, sideways or diagonal, now pans through the viewer's native scroll area.
• Mouse users zoom with Ctrl+wheel, click, or +/-/0, as before.

Verification

Web dev server in Chromium with real wheel input, same test image, Mermaid diagram and steps on main c6ca605 and this head 56e699e. The top-left box is a capture-only overlay showing the viewer's zoom and scroll position.

After 4 wheel-down ticks: main is back at 100% with scroll y=0; this PR stays at 165% and has moved to y=415.

Image, before: watch the zoom. After Ctrl+wheel takes it to 165%, plain scrolling drops it back to 100% and the image never moves.

before-image.mp4

Image, after: zoom stays at 165% while scroll x/y change and the view pans down, right, then up-left. Ctrl+wheel still zooms back to 100%.

after-image.mp4

Mermaid, before and after: same steps on an expanded diagram, same result.

before-mermaid.mp4

after-mermaid.mp4

The blue rounded outline appears only once Tab focuses the viewer, and looks the same on main and this PR (main's focus ring). Wheel-only use shows no outline on either.

• The new browser test in ExpandedImageDialog.browser.test.tsx fails on main (plain wheel is cancelled) and passes here.
• fleet-job check passed at 56e699e (format, lint, knip, typecheck, tests).
• Not shown: physical Mac trackpad pinch and momentum scrolling. Earlier packaged macOS app recordings still apply; the viewer code hasn't changed since.

Implemented by Opus 5.5 in Claude Code; earlier review and macOS testing by gpt-6.1-sol in Codex.

[macroscopeapp]

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.

No code changes detected at 56e699e. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

Important

Review skipped

Review was skipped as selected files did not have any reviewable changes.

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: 5e59ece
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: bc165e57-4ae1-4eae-806a-8b48fff72b2d

Commits

Reviewing files that changed from the base of the PR and between 56e699e and bc839b9.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• Trigger review

No actionable comments were generated in the recent 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.

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

Change: Bug fix · Severity of issue fixed: Low

Possibly related issues

• pingdotgg/t3code#29740: This PR changes ordinary wheel input to pan at a fixed image scale. It does not address the issue’s fit-to-height calculation or maximum zoom behavior.

Possibly related PRs

• pingdotgg/t3code#29836: This PR also changes changeZoom and the viewport layout used by the Ctrl+wheel zoom path.
• pingdotgg/t3code#25246: This PR changes the same wheel listener and zoom code paths.

Suggested reviewers: juliusmarminge, t3dotgg

Merge Risk: Minimal · previous review 56e69

Ordinary scrolling pans while Ctrl+scroll zooms in the reported checks. No concrete issue remains that should block merging.

Pre-merge checks: 2 · 2

Failed checks: 2 inconclusive

Check name	Status	Explanation	Resolution
Out of Scope Changes check		The wheel changes in ZoomableImage.tsx and their regression test support [#26611] and stay in scope. The aria text update supports the new input model. Head 56e699e7 adds a separate change not des…	Provide evidence that expanded Mermaid diagrams or the file-preview path render SVGs without width and height through ZoomableImage, and explain why the SVG fit change belongs in this PR. Alternatively, move the SVG fit change and its tes…
Description check		The description states the problem, the change, and a detailed verification section with recordings, a regression test result, and unverified areas. It is thorough, but it does not link a triaged bug …	Add a "Scope and approval" statement that points to the triaged issue #26611 and any maintainer approval comment on the direction and scope. If maintainer approval is not present, explain why this focused fix of an obvious bug qualifies wit…

Passed checks: 2 passed

Check name	Status	Explanation
Title check		The title "fix(web): scrolling pans expanded images and Mermaid diagrams" names the main change. The changeset makes ordinary wheel input pan expanded images and Mermaid diagrams instead of zooming th…
Linked Issues check		[#26611] requires that ordinary trackpad or wheel scrolling pan expanded images and Mermaid diagrams, and that pinch zoom still zooms. At head 56e699e7, ZoomableImage.tsx returns early from the vi…

Full details: Title check

Explanation

The title "fix(web): scrolling pans expanded images and Mermaid diagrams" names the main change. The changeset makes ordinary wheel input pan expanded images and Mermaid diagrams instead of zooming them, and reserves zoom for pinch and Ctrl+wheel. The title follows the conventional commit format the template recommends and is specific enough for a teammate scanning history.

Full details: Linked Issues check

Explanation

[#26611] requires that ordinary trackpad or wheel scrolling pan expanded images and Mermaid diagrams, and that pinch zoom still zooms. At head 56e699e7, ZoomableImage.tsx returns early from the viewport wheel listener unless event.ctrlKey is set. Pinch on macOS arrives as a ctrlKey wheel event, so pinch zoom stays active. Plain wheel events are no longer canceled, so the overflow-auto viewport scrolls natively. The Ctrl+wheel zoom factor is 0.01. ExpandedImageDialog.browser.test.tsx checks plain-wheel non-cancellation, fixed scale during vertical, horizontal and diagonal panning, and anchored Ctrl+wheel zoom. The change since the previous reviewed head 572de1e0 adds an SVG fit-size change (mimeType === "image/svg+xml" ? Infinity : 1) and a fit test. It does not alter wheel handling, so the wheel requirement assessment still holds. The source diff does not directly show that the expanded Mermaid view uses ZoomableImage. That link rests on the PR description and the before-Mermaid recording. Physical trackpad pinch and momentum are unverified. That gap is not a coding requirement failure.

Full details: Out of Scope Changes check

Explanation

The wheel changes in ZoomableImage.tsx and their regression test support [#26611] and stay in scope. The aria text update supports the new input model. Head 56e699e7 adds a separate change not described in the PR description: the fit scale for image/svg+xml becomes Infinity before the min() with width and height limits, plus the it.each test fits a markdown SVG without intrinsic size to the viewer. The commit comment says an SVG without width and height reports a tiny default size. The change alters initial fit and can upscale vector images. The PR description says the head 572de1e0 change does not alter the viewer implementation, so it does not cover this change. The issue does not mention SVG fit sizing. The diff does not show that expanded Mermaid diagrams reach this path without intrinsic size. The connection to #26611 is therefore unestablished. The change is not shown to be unrelated, because it sits in the same shared viewer used for expanded Mermaid diagrams.

Resolution

Provide evidence that expanded Mermaid diagrams or the file-preview path render SVGs without width and height through ZoomableImage, and explain why the SVG fit change belongs in this PR. Alternatively, move the SVG fit change and its test to a separate pull request. Update the PR description to cover commit 56e699e7.

Full details: Description check

Explanation

The description states the problem, the change, and a detailed verification section with recordings, a regression test result, and unverified areas. It is thorough, but it does not link a triaged bug issue or maintainer approval in the Scope and approval section. It does cite issue #26611 as closed by the PR, and the linked issue objectives describe the reported behavior. Because the template requires an explicit approval reference or justification for scope, that section is incomplete, which keeps the description from a clean pass.

Resolution

Add a "Scope and approval" statement that points to the triaged issue #26611 and any maintainer approval comment on the direction and scope. If maintainer approval is not present, explain why this focused fix of an obvious bug qualifies without prior approval. Also add the model and harness used for the work, as the template asks, and keep the Problem and Change sections in the template's expected form.

Finishing Touches

Generate unit tests (beta)

• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Recent review info

Run configuration

• Source mode: Auto
• Repository: pingdotgg/t3code
• Branch: main
• File: .coderabbit.config.ts
• Commit: c6ca605
• Layers: Repository TS config
• Review profile: CHILL
• Plan: Advanced
• Run ID: 79840045-397b-488a-b849-c02d73e20504

Commits

Reviewing files that changed from the base of the PR and between 572de1e and 56e699e.

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; 7 remain after this review.

[shivamhwp]

[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.

[maria-rcks]

Note

Written by gpt-6.1-sol on behalf of Maria

thanks @shivamhwp. the native overflow panning and ctrl-wheel guard already provide the smallest correct fix, so i kept your implementation and regression test intact. merged current main (8970a32104e0) into your branch without rewriting history. head: 572de1e066a26bd3f16b8cf8b862f829da36ab73. the diff remains two files, with no unrelated changes.

verification:

• reproduced the regression on current main: ordinary wheel was canceled; the existing regression failed there and both browser tests passed with the fix.
• blacksmith vp run check:changed passed format, lint, both knip passes, affected typechecks, browser tests and react compiler checks.
• real web client, system chrome: uploaded image and mermaid attachment expansion, vertical/horizontal panning, ctrl-wheel zoom, click zoom, keyboard reset and closing. an ordinary 180px wheel changed scrollTop by 180 while width stayed 2240px; main shrank that same image to 1563px. mermaid wheel panned 120px at unchanged width, then ctrl-wheel zoomed.
• all 31 head checks are green; cafe reports mergeable. the latest bot review has no actionable findings.
• two independent code reviews approved this head with no findings. uploaded recording playback and seeking passed.

unverified this run: physical trackpad pinch/momentum, packaged electron, native mobile and macos fullscreen spaces. the shared web/electron viewer changes; native mobile is unaffected. maintainer approval of the wheel behavior change remains for review.

matching image data and wheel input, before and after:

[maria-rcks]

Note

Written by gpt-6.1-sol on behalf of Maria

Verified in a real dev environment

verified as-is at 572de1e066a26bd3f16b8cf8b862f829da36ab73 on this linux boat vm. no code changes or pushes.

• reproduced on current github/main (616c426f5f) in ../main, installed with vp i, then stopped its captured dev process before starting the exact pr head. both used real dev servers and isolated state.
• used repo playwright and /usr/bin/google-chrome, at 1440×1000. created a project pointing to a real git repo through the app. a real codex gpt-6.1-sol turn created the architecture image and mermaid response. preserved that app-created state for matching before/after data. a second real codex turn completed through the pr web client and confirmed the file dimensions. no replay provider, mock, fixture, or demo data.
• ordinary vertical, horizontal, and diagonal wheel input pans both expanded markdown images and mermaid diagrams at unchanged scale on the pr. main changes scale on vertical and diagonal input.
• nearby behavior passed: anchored ctrl+wheel zoom (image anchor drift below 0.001), drag panning, click zoom, keyboard plus/minus and 0 reset, arrow-key panning, escape, and the close button. the second provider response appeared in the client.
• blacksmith ran the existing ExpandedImageDialog.browser.test.tsx: both tests passed. github currently reports 21 successful and 10 skipped checks, none failing or pending.

measured through the running client with the same initial zoom and wheel inputs:

                         main                          pr
image, wheel y=180       width 2520 -> 1758.14          width 2520 -> 2520
                                                       scrollTop 525 -> 705
image, wheel x=120                                      scrollLeft 646 -> 766
image, wheel -40,-40                                    x 766 -> 726; y 705 -> 665
mermaid, wheel y=180     width 1312.5 -> 915.69          width 1312.5 -> 1312.5
                                                       scrollTop 525 -> 705
pr codex turn            completed; client displayed:
                         "width: 1600px, height: 1200px."
                         "provider verification complete."

screenshots follow the identical 180px vertical wheel input. the recording shows main first, then the pr; each shows image followed by mermaid, with vertical/horizontal/diagonal wheel, ctrl+wheel, drag, reset, and click zoom. inspected the captures and watched the full exported recording. uploaded playback and seeking also passed in t3's browser.

Not verified

physical trackpad pinch and momentum, packaged electron, macos/windows behavior, native ios/android, remote/relay/tunnel connections, and separate file-preview entry points were not exercised on this linux web run. ctrl+wheel covers the zoom event path, not physical pinch hardware. the first codex turn's optional html preview tool timed out; it still completed and its actual image and mermaid rendered in the client. neither provider turn stalled for ten minutes.

maintainer approval of the default wheel interaction remains a review decision. no merge, close, rebase, force-push, or label changes.

[shivamhwp]

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

Resolved R1, the missing packaged macOS Electron verification, at 572de1e066a26bd3f16b8cf8b862f829da36ab73.

Built an unsigned macOS arm64 ZIP on shiv with vp run dist:desktop:artifact --platform mac --target zip --arch arm64 --output-dir /tmp/test-pr/t3code-26611/artifacts --keep-stage --verbose. The command exited 0 and validated the app payload. The executed bundle reported app.isPackaged === true, embedded commit 572de1e066a2, a t3code://app/ renderer and its bundled server. No Vite server or development renderer ran. Environment: macOS 27.0.1 arm64, Electron 44.10.0, Chromium 152.0.7977.169. Run r_aczqohwzdkfb2q00.

Both viewers passed ordinary vertical, horizontal and diagonal scrolling at fixed zoom, followed by Ctrl+wheel zoom in and out. Representative measurements from trusted CDP wheel input:

Viewer	Ordinary wheel result	Width during all three pan gestures	Ctrl+wheel zoom-in width
Image	Y +180, X +120, then X/Y -40	2483.4375 px unchanged	3524.1719 px
Mermaid	Y +180, X +120, then X/Y -40	2175.0156 px unchanged	3086.4844 px

Each clip shows expansion, Ctrl+wheel zoom, all three ordinary pan gestures, and further Ctrl+wheel zoom. I inspected the extracted frames and the successful numeric test output.

Packaged image:

packaged-image.mp4

Packaged Mermaid:

packaged-mermaid.mp4

Frames from the exported image and Mermaid recordings:

The app used isolated HOME, T3 home and Electron profile from its first launch, with generated image and Mermaid data. It did not access live app state or sign in to T3 Connect. To preserve background control, test-only in-memory hooks made window presentation inactive and disabled focus requests; viewer files, layout and input handlers were unchanged. A readout-only overlay showed the measurements. Input was trusted Chromium CDP wheel automation, not physical trackpad input.

Build provenance: SHA-256 of app.asar was a4662a1e8ccd1adf6f8358a771faeb53b092e28165c3b29161ac8a96cd25b597; packaged ZIP was b19a8fbc957679320ab977e3e4cb7b25abaeebe255384b8ae3c0beb5b579abd1. Both final MP4s decoded without errors. The app and owned subprocesses exited; temporary build, toolchain and isolated state were deleted. The existing checkout stayed clean and unchanged. No source change or push was needed.

Unproven: physical trackpad pinch/momentum, physical mouse hardware, signed/notarized distribution, uninstrumented foreground launch, native macOS fullscreen Spaces, and other platforms or connection modes. This run verifies the packaged viewer behavior, not provider execution or event persistence.