fix: fix ocr overflowing image in modal on small screens

src/lib/components/ImageModal.svelte

@@ -33,16 +33,18 @@
 		</div>
 
 		<div
-			class="grid grid-cols-1 p-4 lg:grid-cols-3 gap-4 min-h-0 flex-1 overflow-auto"
+			class="flex flex-col lg:grid p-4 lg:grid-cols-3 gap-4 h-full flex-1 overflow-auto"
 		>
-			<div class="min-h-0 flex items-center justify-center bg-neutral-50">
+			<div class=" flex items-center justify-center bg-neutral-50">
 				<img
 					src={active.full}
 					alt={active.file}
-					class="w-full object-contain max-h-[80vh]"
+					class="w-full object-contain max-h-[60vh] lg:max-h-[80vh]"
 				/>
 			</div>
-			<div class="flex items-center gap-4 justify-start flex-col">
+			<div
+				class="flex items-center gap-4 justify-start flex-col w-full lg:mt-0"
+			>
 				<div class="flex flex-col gap-2">
 					<h3 class="font-semibold text-lg text-center">OCR text</h3>
 					<select class="select select-info">
@@ -68,7 +70,7 @@
 					</div>
 				</section>
 			</div>
-			<div class="gap-4 flex flex-col min-h-0">
+			<div class="gap-4 flex flex-col min-h-0 mt-4 lg:mt-0">
 				<div class="flex flex-col items-center gap-2">
 					<h3 class="font-semibold text-lg">Model Predictions</h3>
 					<select class="select select-info">