Reported in Discord #mobile-testing: mobile screenshots render "zoomed(cut) in a lot" in the main pane while the timeline thumbnails look fine. Both are wrong, in the same way — the player fits a portrait capture by the wrong axis — so they are one fix in two places.
Main pane
The screenshot branch of the player is styled max-width: 100%; height: auto inside a container with overflow: hidden — a width-only fit. A portrait capture is scaled up to the pane width, overflows vertically, and the remainder is clipped. Every native mobile trace lands on this branch, because a native app has no DOM to replay.
Measured on a 1206x2622 iPhone 17 capture in a 1240x457 pane: a width fit needs 2696px of height, so the player showed 17% of the device screen at 5.9x magnification. The captured bytes are correct — dragging the image out of the player shows the whole screen.
Fix: bound both axes (max-height, object-fit: contain), the same contain-fit the screencast branch already uses.
Filmstrip
The timeline draws each thumbnail in an aspect-video box with object-cover. Cover crops to fill, so a portrait capture is reduced to a horizontal band through its middle — on a phone app screen that band is usually empty page, and the whole filmstrip renders as blank white rectangles.
Fix: give the thumbnail the capture's own shape when the trace names a device; leave the 16:9 box for browser captures.
Neither is mobile-specific in principle — any tall capture in a DOM-less trace hits both — mobile just makes them unmissable.
Reported in Discord #mobile-testing: mobile screenshots render "zoomed(cut) in a lot" in the main pane while the timeline thumbnails look fine. Both are wrong, in the same way — the player fits a portrait capture by the wrong axis — so they are one fix in two places.
Main pane
The screenshot branch of the player is styled
max-width: 100%; height: autoinside a container withoverflow: hidden— a width-only fit. A portrait capture is scaled up to the pane width, overflows vertically, and the remainder is clipped. Every native mobile trace lands on this branch, because a native app has no DOM to replay.Measured on a 1206x2622 iPhone 17 capture in a 1240x457 pane: a width fit needs 2696px of height, so the player showed 17% of the device screen at 5.9x magnification. The captured bytes are correct — dragging the image out of the player shows the whole screen.
Fix: bound both axes (
max-height,object-fit: contain), the same contain-fit the screencast branch already uses.Filmstrip
The timeline draws each thumbnail in an
aspect-videobox withobject-cover. Cover crops to fill, so a portrait capture is reduced to a horizontal band through its middle — on a phone app screen that band is usually empty page, and the whole filmstrip renders as blank white rectangles.Fix: give the thumbnail the capture's own shape when the trace names a device; leave the 16:9 box for browser captures.
Neither is mobile-specific in principle — any tall capture in a DOM-less trace hits both — mobile just makes them unmissable.