👁️
always wrap card
+14
-8
+14
-8
src/components/CardImage.tsx
+14
-8
src/components/CardImage.tsx
···
103
103
const imgBaseClassName = `max-w-full text-transparent ${imgClassName ?? ""}`;
104
104
105
105
if (!flippable) {
106
-
// Non-flippable: no wrapper, both outer and img classes go on the img
106
+
// Non-flippable: wrap in div for reliable space reservation
107
+
// (img aspect-ratio alone is unreliable on some mobile browsers during SPA navigation)
107
108
return (
108
-
<img
109
-
src={getImageUri(card.id, size, face)}
110
-
alt={card.name}
111
-
className={`${outerClassName ?? ""} ${imgBaseClassName} bg-gray-200 dark:bg-zinc-700`}
112
-
style={{ ...CARD_STYLES, backgroundImage: PLACEHOLDER_STRIPES }}
113
-
loading="lazy"
114
-
/>
109
+
<div
110
+
className={outerClassName}
111
+
style={{ aspectRatio: CARD_ASPECT_RATIO }}
112
+
>
113
+
<img
114
+
src={getImageUri(card.id, size, face)}
115
+
alt={card.name}
116
+
className={`w-full ${imgBaseClassName} bg-gray-200 dark:bg-zinc-700`}
117
+
style={{ ...CARD_STYLES, backgroundImage: PLACEHOLDER_STRIPES }}
118
+
loading="lazy"
119
+
/>
120
+
</div>
115
121
);
116
122
}
117
123