👁️
fix showing printing for card modal w thin viewports
+26
-12
+26
-12
src/components/deck/CardModal.tsx
+26
-12
src/components/deck/CardModal.tsx
···
39
39
}: CardModalProps) {
40
40
const [quantity, setQuantity] = useState<number | string>(card.quantity);
41
41
const [tags, setTags] = useState<string[]>(card.tags ?? []);
42
+
const [hoveredPrintingId, setHoveredPrintingId] = useState<ScryfallId>(
43
+
card.scryfallId,
44
+
);
42
45
43
46
const titleId = useId();
44
47
const sectionId = useId();
45
48
46
49
const { data: cardData } = useQuery(getCardByIdQueryOptions(card.scryfallId));
50
+
const { data: hoveredCardData } = useQuery(
51
+
getCardByIdQueryOptions(hoveredPrintingId),
52
+
);
47
53
const primaryFace = cardData ? getPrimaryFace(cardData) : null;
48
54
49
55
// Suggestions: all tags except ones already on this card
···
52
58
useEffect(() => {
53
59
setQuantity(card.quantity);
54
60
setTags(card.tags ?? []);
61
+
setHoveredPrintingId(card.scryfallId);
55
62
}, [card]);
56
63
57
64
// Keyboard shortcuts: Escape to close, 1-9 to set quantity
···
182
189
{/* Body */}
183
190
<div className="p-6 space-y-6">
184
191
{/* Card image - only shown on mobile where sidebar preview is hidden */}
185
-
{cardData && (
186
-
<div className="md:hidden flex justify-center">
187
-
<div className="w-64">
188
-
<CardImage
189
-
card={cardData}
190
-
size="normal"
191
-
outerClassName="w-full h-auto"
192
-
imgClassName="shadow-lg"
193
-
/>
192
+
{(() => {
193
+
const displayCard = hoveredCardData ?? cardData;
194
+
if (!displayCard) return null;
195
+
return (
196
+
<div className="md:hidden flex justify-center">
197
+
<div className="w-64">
198
+
<CardImage
199
+
card={displayCard}
200
+
size="normal"
201
+
outerClassName="w-full h-auto"
202
+
imgClassName="shadow-lg"
203
+
/>
204
+
</div>
194
205
</div>
195
-
</div>
196
-
)}
206
+
);
207
+
})()}
197
208
198
209
{/* Quantity */}
199
210
<div>
···
299
310
oracleId={card.oracleId}
300
311
currentScryfallId={card.scryfallId}
301
312
onSelect={onUpdatePrinting}
302
-
onHover={onCardHover}
313
+
onHover={(id) => {
314
+
setHoveredPrintingId(id ?? card.scryfallId);
315
+
onCardHover?.(id);
316
+
}}
303
317
/>
304
318
)}
305
319
</div>