👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

try and fix flip card placeholder

+5 -4
+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,