From 0c05194b85d9f86153a2bd80ff946faf5925a646 Mon Sep 17 00:00:00 2001
From: arkohut <39525455+arkohut@users.noreply.github.com>
Date: Sun, 7 Jul 2024 16:57:41 +0800
Subject: [PATCH] feat(web): update style make modal fixed height

---
 web/src/lib/Figure.svelte | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/lib/Figure.svelte b/web/src/lib/Figure.svelte
index be73e1d..64692bb 100644
--- a/web/src/lib/Figure.svelte
+++ b/web/src/lib/Figure.svelte
@@ -33,7 +33,7 @@
 
 <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
 	<div
-		class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group"
+		class="relative top-10 mx-auto p-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
 	>
 		<!-- Button container -->
 		<div class="group">
@@ -51,13 +51,13 @@
 			</button>
 			<!-- Your modal content goes here -->
 		</div>
-		<div class="flex">
+		<div class="flex flex-col md:flex-row h-full">
 			<!-- Image container -->
-			<div class="flex-none w-full md:w-1/2 h-96 md:h-auto">
-				<img class="h-full w-full object-cover" src={image} alt={title} />
+			<div class="flex-none w-full md:w-1/2 h-full">
+				<img class="w-full h-full object-contain" src={image} alt={title} />
 			</div>
 			<!-- Description container -->
-			<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto h-96 md:h-auto">
+			<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full">
 				<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
 				<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
 					{title}
@@ -92,4 +92,4 @@
 			</button>
 		</div>
 	</div>
-</div>
+</div>
\ No newline at end of file