highperfocused/lumina
1
0
Fork 0
mirror of https://github.com/lumina-rocks/lumina.git synced 2026-06-05 10:11:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor KIND20Card image container for responsive height adjustments

Browse Source
This commit is contained in:
mr0x50
2025-03-17 21:00:38 +01:00
parent 6b941644e5
commit a4304a279d
1 changed files with 23 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/KIND20Card.tsx
View File

@@ -80,14 +80,29 @@ const KIND20Card: React.FC<KIND20CardProps> = ({
<CardContent className="p-0">
<div className="px-2 sm:px-4">
<div className="w-full">
<div className="relative w-full" style={{ paddingBottom: "100%" }}>
<Image
src={image}
alt={text}
fill
className="rounded-lg object-contain"
onError={() => setImageError(true)}
/>
{/* Modified image container with max-height for desktop */}
<div className="relative w-full sm:max-h-[500px] md:max-h-[600px]">
{/* On mobile, keep original square aspect ratio, on desktop limit height */}
<div className="block sm:hidden relative w-full" style={{ paddingBottom: "100%" }}>
<Image
src={image}
alt={text}
fill
className="rounded-lg object-contain"
onError={() => setImageError(true)}
/>
</div>
{/* Desktop version with constrained height */}
<div className="hidden sm:block w-full h-full max-h-[600px]">
<Image
src={image}
alt={text}
width={1200}
height={800}
className="rounded-lg object-contain w-full h-auto max-h-[600px]"
onError={() => setImageError(true)}
/>
</div>
</div>
</div>
</div>