👁️
try and fix flip card placeholder
+5
-4
+5
-4
src/components/CardImage.tsx
+5
-4
src/components/CardImage.tsx
···
89
89
};
90
90
91
91
// Base styles always applied to images
92
-
const imgBaseClassName = `rounded-[${CARD_BORDER_RADIUS}] aspect-[${CARD_ASPECT_RATIO}] max-w-full ${imgClassName ?? ""}`;
92
+
// text-transparent hides browser's ugly alt text rendering
93
+
const imgBaseClassName = `rounded-[${CARD_BORDER_RADIUS}] aspect-[${CARD_ASPECT_RATIO}] max-w-full text-transparent ${imgClassName ?? ""}`;
93
94
94
95
if (!flippable) {
95
96
// Non-flippable: no wrapper, both outer and img classes go on the img
···
122
123
<img
123
124
src={getImageUri(card.id, size, "front")}
124
125
alt={card.name}
125
-
className={`${imgBaseClassName} bg-gray-200 dark:bg-zinc-700`}
126
+
className={`w-full ${imgBaseClassName} bg-gray-200 dark:bg-zinc-700`}
126
127
loading="lazy"
127
128
style={{
128
129
backfaceVisibility: "hidden",
···
132
133
<img
133
134
src={getImageUri(card.id, size, "back")}
134
135
alt={`${card.name} (back)`}
135
-
className={`${imgBaseClassName} bg-gray-200 dark:bg-zinc-700 absolute inset-0`}
136
+
className={`w-full ${imgBaseClassName} bg-gray-200 dark:bg-zinc-700 absolute inset-0`}
136
137
loading="lazy"
137
138
style={{
138
139
backfaceVisibility: "hidden",
···
145
146
<img
146
147
src={getImageUri(card.id, size, face)}
147
148
alt={card.name}
148
-
className={`${imgBaseClassName} bg-gray-200 dark:bg-zinc-700 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out`}
149
+
className={`w-full ${imgBaseClassName} bg-gray-200 dark:bg-zinc-700 motion-safe:transition-transform motion-safe:duration-500 motion-safe:ease-in-out`}
149
150
loading="lazy"
150
151
style={{
151
152
backgroundImage: PLACEHOLDER_STRIPES,