From d27cc625e46b77006e49a7ae3deb311742b81d5e Mon Sep 17 00:00:00 2001
From: dnviti <dnviti@gmail.com>
Date: Thu, 18 Dec 2025 02:30:20 +0100
Subject: [PATCH] feat: Conditionally render dragged card art crop and square
 aspect ratio for small sizes.

---
 .../src/modules/draft/DeckBuilderView.tsx     | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/client/src/modules/draft/DeckBuilderView.tsx b/src/client/src/modules/draft/DeckBuilderView.tsx
index 3399377..70eb045 100644
--- a/src/client/src/modules/draft/DeckBuilderView.tsx
+++ b/src/client/src/modules/draft/DeckBuilderView.tsx
@@ -884,14 +884,21 @@ export const DeckBuilderView: React.FC<DeckBuilderViewProps> = ({ initialPool, a
         </div>
 
         <DragOverlay dropAnimation={null}>
-          {draggedCard ? (
-            <div
-              style={{ width: `${localCardWidth}px` }}
-              className={`rounded-xl shadow-2xl opacity-90 rotate-3 cursor-grabbing overflow-hidden ring-2 ring-emerald-500 bg-slate-900 aspect-[2.5/3.5]`}
-            >
-              <img src={draggedCard.image || draggedCard.image_uris?.normal} alt={draggedCard.name} className="w-full h-full object-cover" draggable={false} />
-            </div>
-          ) : null}
+          {draggedCard ? (() => {
+            const useArtCrop = localCardWidth < 130 && !!draggedCard.imageArtCrop;
+            const displayImage = useArtCrop ? draggedCard.imageArtCrop : (draggedCard.image || draggedCard.image_uris?.normal);
+            // Default to square for crop, standard ratio otherwise
+            const aspectRatio = useArtCrop ? 'aspect-square' : 'aspect-[2.5/3.5]';
+
+            return (
+              <div
+                style={{ width: `${localCardWidth}px` }}
+                className={`rounded-xl shadow-2xl opacity-90 rotate-3 cursor-grabbing overflow-hidden ring-2 ring-emerald-500 bg-slate-900 ${aspectRatio}`}
+              >
+                <img src={displayImage} alt={draggedCard.name} className="w-full h-full object-cover" draggable={false} />
+              </div>
+            );
+          })() : null}
         </DragOverlay>
       </DndContext>
     </div>