fix(app): fit a DOM-less capture by both axes

[vishnuv688]

What & why

Type of change

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Polish (an improvement to an existing feature)
• Breaking change (existing behavior changes for users)
• Documentation
• Internal (build, CI, dependencies, tooling)

Packages touched

• shared (types and contracts)
• core (framework-agnostic capture/reporting)
• elements (published element/snapshot API — @wdio/elements)
• service (WebdriverIO adapter)
• nightwatch-devtools (Nightwatch adapter)
• selenium-devtools (Selenium adapter)
• selenium-devtools-py (Selenium Python adapter)
• backend (server)
• app (UI)
• script (page-injected runtime)
• trace (Trace mode)

Notes for reviewers

Screenshots / recordings

[greptile-apps]

Greptile Summary

The PR fixes display of DOM-less screenshots and filmstrip thumbnails by fitting captures along both axes and deriving thumbnail proportions from image headers.

• Adds shared PNG/JPEG MIME and dimension helpers, including support for JPEG metadata segments.
• Uses object-fit: contain for full screenshot and thumbnail visibility.
• Preserves a 16:9 thumbnail fallback when image dimensions cannot be read.
• Reuses shared MIME detection in trace frame snapshots.
• Adds unit and browser-component coverage for portrait, landscape, malformed, and metadata-heavy images.

Confidence Score: 5/5

The PR appears safe to merge, with no actionable correctness, security, or repository-rule issues identified.

The latest change makes the malformed-image fixture valid base64 in the browser environment, avoiding an unrelated resource-loading error while preserving coverage of the 16:9 fallback. The complete implementation consistently shares image parsing across packages, contains captures without cropping, and covers the relevant image formats and layout directions.

Important Files Changed

Filename	Overview
packages/shared/src/image.ts	Adds bounded PNG and JPEG header parsing for shared MIME and intrinsic-dimension detection.
packages/app/src/components/browser/trace-timeline.ts	Shapes filmstrip thumbnails from capture dimensions and contains images without cropping.
packages/app/src/components/browser/snapshot-styles.ts	Fits DOM-less screenshots within both dimensions of the available pane.
packages/trace/src/trace-frame-snapshots.ts	Replaces local screenshot MIME detection with the shared helper.
packages/shared/tests/image.test.ts	Covers PNG and JPEG dimensions, metadata traversal, malformed input, and zero-sized headers.
packages/app/test-ui/workbench/player/snapshot.test.ts	Verifies portrait and landscape DOM-less captures remain within the clipping pane.
packages/app/test-ui/workbench/player/trace-timeline.test.ts	Verifies intrinsic thumbnail shape, non-cropping behavior, and the sizeless-image fallback.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  Capture[Base64 screenshot] --> Dimensions[Shared imageDimensions helper]
  Capture --> Mime[Shared imageMime helper]
  Dimensions -->|Valid dimensions| Ratio[Capture aspect ratio]
  Dimensions -->|No dimensions| Fallback[16:9 fallback]
  Ratio --> Filmstrip[Contained filmstrip thumbnail]
  Fallback --> Filmstrip
  Mime --> ImageURL[Image data URL]
  ImageURL --> MainPane[Contained DOM-less screenshot]
  ImageURL --> Filmstrip

Loading

_{Reviews (3): Last reviewed commit: "test(app): give the sizeless filmstrip f..." | Re-trigger Greptile}