Avoid Upscaling Small Game Boxart Images #854

New issue

Open

opened 2026-07-30 15:40:21 -05:00 by Veilor · 0 comments

Veilor commented

2026-07-30 15:40:21 -05:00

Member

Copy link

Current game image surfaces use fixed display widths or full-width containers with object-cover or object-contain, while GameMediaUrls only resolves the URL. The implementation should define a threshold-backed presentation rule for small boxart and apply it consistently to the main user-facing game image surfaces.

Scope

Game profile information-card boxart.
Shared game card/list item boxart used by search and platform/newly-added style lists.
Wishlist and favorite row boxart.
Popular games and popular upcoming games card boxart.
No-boxart fallback states.
Existing local/S3/external boxart URL behavior from GameMediaUrls.

Acceptance Criteria

Small boxart images below the chosen threshold are not visually upscaled into blurry large displays.
Normal-sized and large boxart still fit their current layout areas cleanly.
The threshold is documented in code or centralized enough that future image surfaces can reuse it.
Game profile, shared game cards, wishlist rows, favorite rows, and popular-game cards use consistent small-image behavior.
No-boxart fallback states continue rendering as they do today.
External image URLs and stored S3/local boxart URLs continue to resolve correctly.
The layout remains responsive and does not cause image/card overlap on mobile or desktop.

Test Coverage Required

Add or extend feature coverage for at least one small-boxart game profile render.
Add or extend coverage for shared game card/list rendering with small-boxart presentation classes or metadata hooks.
Extend wishlist/favorite or popular card coverage if those surfaces need separate markup assertions.
Preserve existing tests that assert boxart URLs and no-art fallback states.
Include regression coverage for normal boxart continuing to use the expected full card/profile presentation.
Run focused affected feature tests before closing the issue.
Run npm run build if frontend assets or shared JavaScript/CSS change.
Run vendor/bin/pint --dirty --format agent before implementation closeout if PHP files change.

Progress Checklist

Choose and document the small-boxart threshold
Add a reusable way to mark or present small boxart without unsafe upscaling
Apply the behavior to the game profile information card
Apply the behavior to shared game card/list item images
Apply the behavior to wishlist/favorite and popular-card image surfaces as needed
Preserve no-boxart and normal-boxart presentation
Add focused image presentation regression coverage
Run focused affected tests and asset build if needed
Run vendor/bin/pint --dirty --format agent if PHP files changed
Move the issue out of Codex review once verification is complete

Very small game boxart should not be enlarged until it becomes blurry. Large and moderately sized boxart can still fit the available layout, but tiny source images need a lower-impact presentation so original assets remain usable without making game pages and cards look fuzzy. Current game image surfaces use fixed display widths or full-width containers with `object-cover` or `object-contain`, while `GameMediaUrls` only resolves the URL. The implementation should define a threshold-backed presentation rule for small boxart and apply it consistently to the main user-facing game image surfaces. ## Scope - Game profile information-card boxart. - Shared game card/list item boxart used by search and platform/newly-added style lists. - Wishlist and favorite row boxart. - Popular games and popular upcoming games card boxart. - No-boxart fallback states. - Existing local/S3/external boxart URL behavior from `GameMediaUrls`. ## Acceptance Criteria - Small boxart images below the chosen threshold are not visually upscaled into blurry large displays. - Normal-sized and large boxart still fit their current layout areas cleanly. - The threshold is documented in code or centralized enough that future image surfaces can reuse it. - Game profile, shared game cards, wishlist rows, favorite rows, and popular-game cards use consistent small-image behavior. - No-boxart fallback states continue rendering as they do today. - External image URLs and stored S3/local boxart URLs continue to resolve correctly. - The layout remains responsive and does not cause image/card overlap on mobile or desktop. ## Test Coverage Required - Add or extend feature coverage for at least one small-boxart game profile render. - Add or extend coverage for shared game card/list rendering with small-boxart presentation classes or metadata hooks. - Extend wishlist/favorite or popular card coverage if those surfaces need separate markup assertions. - Preserve existing tests that assert boxart URLs and no-art fallback states. - Include regression coverage for normal boxart continuing to use the expected full card/profile presentation. - Run focused affected feature tests before closing the issue. - Run `npm run build` if frontend assets or shared JavaScript/CSS change. - Run `vendor/bin/pint --dirty --format agent` before implementation closeout if PHP files change. ## Progress Checklist - [ ] Choose and document the small-boxart threshold - [ ] Add a reusable way to mark or present small boxart without unsafe upscaling - [ ] Apply the behavior to the game profile information card - [ ] Apply the behavior to shared game card/list item images - [ ] Apply the behavior to wishlist/favorite and popular-card image surfaces as needed - [ ] Preserve no-boxart and normal-boxart presentation - [ ] Add focused image presentation regression coverage - [ ] Run focused affected tests and asset build if needed - [ ] Run `vendor/bin/pint --dirty --format agent` if PHP files changed - [ ] Move the issue out of Codex review once verification is complete

Veilor added the

Rows
Columns