unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Fix product images on mobile: use explicit width/height instead of fill
Some checks are pending
Build and Deploy / build (push) Waiting to run
Details

Browse Source
This commit is contained in:
Unchained
2026-03-22 21:27:38 +02:00
parent e9b95c44b9
commit 7ecd9c2e22
2 changed files with 7 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/product/ProductCard.tsx
View File

@@ -33,8 +33,9 @@ export default function ProductCard({ product, index = 0, locale = "SR" }: Produ
src={image} src={image}
alt={localized.name} alt={localized.name}
fill fill
className="object-cover transition-transform duration-700 ease-out group-hover:scale-105" className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw" sizes="100vw"
loading="lazy"
/> />
) : ( ) : (
<div className="absolute inset-0 flex items-center justify-center text-[#999999]"> <div className="absolute inset-0 flex items-center justify-center text-[#999999]">

8
src/components/product/ProductDetail.tsx
View File

@@ -180,15 +180,15 @@ export default function ProductDetail({ product, relatedProducts, locale = "SR"
)} )}
{/* Main Image */} {/* Main Image */}
<div className="relative aspect-square bg-[#f8f9fa] overflow-hidden"> <div className="relative bg-[#f8f9fa] overflow-hidden">
{images[selectedImage] && ( {images[selectedImage] && (
<Image <Image
src={images[selectedImage].url} src={images[selectedImage].url}
alt={images[selectedImage].alt || localized.name} alt={images[selectedImage].alt || localized.name}
fill width={600}
className="object-cover" height={600}
className="w-full h-auto object-cover"
priority priority
sizes="(max-width: 1024px) 100vw, 50vw"
/> />
)} )}
</div> </div>