Expanded image viewer shrinks tall screenshots to a narrow strip and can't zoom them to a readable size #29740

What happened

In the pull request view, clicking a tall image in the PR description (a full-page phone screenshot) opens the viewer with the whole image fitted to the window height, so it shows up as a narrow strip. Clicking zooms in once, and clicking again goes back to the strip. There is no way to keep zooming until it's readable, or to scroll down a tall image at a readable size.

Expected: a tall image can be read top to bottom, for example by opening it fitted to width and scrolling vertically.

Diagnosis

apps/web/src/components/chat/ZoomableImage.tsx (v0.1.6):

• Fit is min(1, availableWidth / naturalWidth, maxHeight / naturalHeight), so height wins for a ~22:1 image. A 1170×26490 screenshot opens at 3.4% scale, about 39px wide in a 1920×1050 window.
• Click toggles zoom between 1 and 2 (changeZoom(zoom > 1 ? 1 : 2)), so clicking only reaches about 79px wide, then goes back.
• MAX_ZOOM = 8 is relative to the fitted size, not the image's natural size. Pinch or Ctrl+scroll stops at about 27% of natural size (314px wide). Fitting to width would need about 30×.
• A plain scroll zooms instead of panning ([Bug]: Scrolling with Mac trackpad in fullscreened Image view/Mermaid diagram should move the content instead of zooming #26611), so you can't scroll down a zoomed image. You can only drag it.

Main at 701e13c still uses the same fit for raster images. #27519 only removed the fit cap for SVGs.

Possible direction: if an image is much taller than the viewer, open it fitted to width (capped at its natural size) with vertical scrolling, make a click switch between that and fit-whole, and let max zoom always reach at least 100%.

Steps to reproduce

1. In T3 Code Desktop, open a PR whose description has a full-page mobile screenshot, such as a 1170×26490 PNG.
2. On the Pull Requests page, open the PR's summary and click one of the phone screenshots.
3. The image opens as a narrow strip (about 39px wide in a 1920×1050 window).
4. Click it: it grows to about 79px wide. Click again: it goes back to the strip.
5. Pinch or Ctrl+scroll: zoom stops at about 27% of natural size, which is still too small to read.
6. Two-finger scroll on the trackpad: it zooms instead of scrolling down the image.

Version

0.1.6 (T3 Code Desktop and local server). Same fit and zoom code on main at 701e13c.

Environment

macOS (Darwin 27.2.0) arm64, T3 Code Desktop 0.1.6, Node v24.22.1, 1920×1080 display

Evidence

Image sizes in the viewer, computed with the v0.1.6 fit formula and MAX_ZOOM = 8.
Image dimensions are from full-page screenshots in a real PR description.

Window 1920x1050 (maxHeight 890px):
phone   1170x26490  fit 3.4%   1x 39px | click 2x 79px | max 8x 314px (27% of natural) | fit-to-width needs 29.8x
phone   1170x21159  fit 4.2%   1x 49px | click 2x 98px | max 8x 394px (34% of natural) | fit-to-width needs 23.8x
desktop 1440x6995   fit 12.7%  1x 183px | click 2x 366px | max 8x 1466px (102% of natural)

Window 1280x800 (maxHeight 640px):
phone   1170x26490  fit 2.4%   1x 28px | click 2x 57px | max 8x 226px (19% of natural) | fit-to-width needs 38.3x

Related issues

#26611 and PR #26630: plain scroll zooms instead of panning. That fix makes scrolling pan, but tall images still open as a narrow strip and still can't zoom past 8× the fitted size. #26662 is a similar report on iOS. #27519 removed the fit cap for SVGs only.

Fix applied or workaround

None run on the machine. Workaround: open the PR on github.com to read tall screenshots.

Filed by

Claude Code (claude-opus-5-5) via T3 Code triage