From 090271bdb947a086137c4589926665e743c7e28a Mon Sep 17 00:00:00 2001
From: Huakun Shen <huakun.shen@huakunshen.com>
Date: Sat, 18 Jan 2025 23:36:18 -0500
Subject: [PATCH] fix: improve layout of DialogImageCarousel component

- Adjusted Carousel.Item to use flexbox for better alignment of images.
- Removed unnecessary class attributes for cleaner markup.
- Ensured images maintain their aspect ratio with object-contain styling.
---
 .../ui/src/components/common/DialogImageCarousel.svelte     | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/common/DialogImageCarousel.svelte b/packages/ui/src/components/common/DialogImageCarousel.svelte
index 66d9dc0..4598b53 100644
--- a/packages/ui/src/components/common/DialogImageCarousel.svelte
+++ b/packages/ui/src/components/common/DialogImageCarousel.svelte
@@ -43,10 +43,10 @@
 <Dialog.Root bind:open>
 	<Dialog.Content class="flex max-h-[80vh] w-10/12 max-w-full items-center justify-center">
 		<Carousel.Root setApi={(emblaApi) => (api = emblaApi)} class="max-h-[80vh] w-full">
-			<Carousel.Content class="flex max-h-[75vh] items-center justify-center">
+			<Carousel.Content class="max-h-[75vh]">
 				{#each imageSrcs as src}
-					<Carousel.Item class="">
-						<img {src} class="max-h-full max-w-full object-contain" alt="" />
+					<Carousel.Item class="flex justify-center">
+            <img {src} class="object-contain" alt="" />
 					</Carousel.Item>
 				{/each}
 			</Carousel.Content>