Use object-contain for box art to prevent cropping

Wrap the box art img in a div with the game color as background and
switch from object-cover to object-contain. This shows the full box art
without cropping, especially important for the taller Switch-era cases.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-07 21:43:21 +01:00
parent 8915f69215
commit 6f231e522b

View File

@@ -23,12 +23,14 @@ export function GameCard({ game, selected, onSelect }: GameCardProps) {
}`}
>
{imgIdx < boxArtSrcs.length ? (
<img
src={boxArtSrcs[imgIdx]}
alt={game.name}
className="w-full h-48 object-cover"
onError={() => setImgIdx((i) => i + 1)}
/>
<div className="w-full h-48" style={{ backgroundColor }}>
<img
src={boxArtSrcs[imgIdx]}
alt={game.name}
className="w-full h-full object-contain"
onError={() => setImgIdx((i) => i + 1)}
/>
</div>
) : (
<div
className="w-full h-48 flex items-center justify-center"