From 6f231e522bf33ac1e420fe6f5f3954701812c502 Mon Sep 17 00:00:00 2001
From: Julian Tabel <juliantabel.jt@gmail.com>
Date: Sat, 7 Feb 2026 21:43:21 +0100
Subject: [PATCH] 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>
---
 frontend/src/components/GameCard.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/GameCard.tsx b/frontend/src/components/GameCard.tsx
index 0d47d6c..22dc7de 100644
--- a/frontend/src/components/GameCard.tsx
+++ b/frontend/src/components/GameCard.tsx
@@ -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"