From b369d1f5c7f4422e2ec6c3d8bd13e52538efb3fb Mon Sep 17 00:00:00 2001
From: trafficlunar <hello@trafficlunar.net>
Date: Sun, 20 Apr 2025 12:40:23 +0100
Subject: [PATCH] style: center images in image-viewer component

might make the actual dialog change height based on the image
---
 src/components/carousel.tsx     | 2 +-
 src/components/image-viewer.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/carousel.tsx b/src/components/carousel.tsx
index b366c30..5bcabec 100644
--- a/src/components/carousel.tsx
+++ b/src/components/carousel.tsx
@@ -51,7 +51,7 @@ export default function Carousel({ images, className }: Props) {
 			<div className={`overflow-hidden rounded-xl bg-zinc-300 border-2 border-zinc-300 ${className ?? ""}`} ref={emblaRef}>
 				<div className="flex">
 					{images.map((src, index) => (
-						<div key={index} className="flex-[0_0_100%]">
+						<div key={index} className="flex-shrink-0 w-full">
 							<ImageViewer src={src} alt="mii image" width={480} height={320} className="w-full h-auto aspect-[3/2] object-contain" images={images} />
 						</div>
 					))}
diff --git a/src/components/image-viewer.tsx b/src/components/image-viewer.tsx
index 09cfa08..b7b76b1 100644
--- a/src/components/image-viewer.tsx
+++ b/src/components/image-viewer.tsx
@@ -41,7 +41,7 @@ export default function ImageViewer({ src, alt, width, height, className, images
 	useEffect(() => {
 		if (!emblaApi) return;
 
-		// Keep order of images whilst opening on src
+		// Keep order of images whilst opening at src prop
 		const index = images.indexOf(src);
 		if (index !== -1) {
 			emblaApi.scrollTo(index);
@@ -111,8 +111,8 @@ export default function ImageViewer({ src, alt, width, height, className, images
 									) : (
 										<>
 											{images.map((image, index) => (
-												<div key={index} className="flex-[0_0_100%]">
-													<Image src={image} alt={alt} width={576} height={576} className="w-full" />
+												<div key={index} className="flex-shrink-0 w-full">
+													<Image src={image} alt={alt} width={576} height={576} className="w-full h-full object-contain" />
 												</div>
 											))}
 										</>