feat: support portrait gallery cards

[altaywtf]

Summary

Make gallery cards usable for phone, tablet, and square references without changing the manifest contract.

Changed

• derive landscape, portrait, or square orientation from existing viewport dimensions
• render portrait previews at 3:4 and square previews at 1:1 while retaining 16:9 landscape cards
• contain complete images instead of cropping visual references
• align mixed-height cards to the start of each grid row
• document and test the rendering contract

Review aids

flowchart LR
  V["Manifest viewport"] --> O{"Derived orientation"}
  O -->|"width > height"| L["Landscape: 16:9"]
  O -->|"width < height"| P["Portrait: 3:4"]
  O -->|"width = height"| S["Square: 1:1"]
  L --> C["Complete image via contain"]
  P --> C
  S --> C

Loading

Runtime proof used the real putio-ios gallery at 1440x1000 and 390x844. All 13 phone screenshots rendered fully, with three desktop columns collapsing to one mobile column.

Risks

Low. Existing manifests need no changes. Landscape cards retain the existing frame ratio, but object fitting now favors complete visual-reference content over edge-to-edge cropping.

Verification

• pnpm run verify
• 24 tests passed
• npm dry-pack passed
• local putio-ios gallery build: 24 screenshots, 2 groups, 2 devices
• desktop and mobile browser inspection passed
• autoreview: clean, no actionable findings

Complexity

Small renderer-only behavior change with focused contract coverage.

[Copilot]

Pull request overview

This PR updates the static gallery renderer to support portrait and square screenshots by deriving an orientation from existing viewport dimensions (no manifest schema changes), and adjusting preview framing/rendering accordingly.

Changes:

• Add derived data-orientation (landscape/portrait/square) to each rendered card based on viewport dimensions.
• Update gallery card previews to use object-fit: contain and orientation-specific aspect-ratio (16:9, 3:4, 1:1), plus align mixed-height grid items to the start.
• Add tests and documentation describing the orientation/rendering contract.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

File	Description
src/render.ts	Derives orientation from viewport and adjusts CSS/layout for portrait/square previews with contain fitting.
test/vref.test.ts	Adds contract tests asserting derived orientations and new CSS behavior.
docs/VREF.md	Documents the new gallery card orientation and preview rendering rules.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[putio-releaser]

🎉 This PR is included in version 1.2.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀