From 9800be01474cb698942ce174c6f2dda8dce45a0f Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Tue, 4 Nov 2025 12:09:05 +0100
Subject: [PATCH] fix:Adjust media layout, sizing, and mobile sheet

Render media container only when media exists and remove the no-media
placeholder. Constrain images and videos with a max-height of 600px
(height:auto) and set images to display:block. In preview, use
object-fit: contain for media images and reduce mobile sheet height from
80vh to 50vh.
---
 src/lib/components/FindCard.svelte    | 43 +++++++--------------------
 src/lib/components/FindPreview.svelte |  4 +--
 2 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/src/lib/components/FindCard.svelte b/src/lib/components/FindCard.svelte
index 4d52530..cb1fc3f 100644
--- a/src/lib/components/FindCard.svelte
+++ b/src/lib/components/FindCard.svelte
@@ -101,8 +101,8 @@
 	</div>
 
 	<!-- Media -->
-	<div class="post-media">
-		{#if media && media.length > 0}
+	{#if media && media.length > 0}
+		<div class="post-media">
 			{#if media[0].type === 'photo'}
 				<img
 					src={media[0].thumbnailUrl || media[0].url}
@@ -120,21 +120,8 @@
 					class="media-video"
 				/>
 			{/if}
-		{:else}
-			<div class="no-media">
-				<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
-					<path
-						d="M21 10C21 17 12 23 12 23S3 17 3 10A9 9 0 0 1 12 1A9 9 0 0 1 21 10Z"
-						stroke="currentColor"
-						stroke-width="2"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-					/>
-					<circle cx="12" cy="10" r="3" stroke="currentColor" stroke-width="2" />
-				</svg>
-			</div>
-		{/if}
-	</div>
+		</div>
+	{/if}
 
 	<!-- Post Actions -->
 	<div class="post-actions">
@@ -258,33 +245,23 @@
 	/* Media */
 	.post-media {
 		width: 100%;
-		aspect-ratio: 16/10;
+		max-height: 600px;
 		overflow: hidden;
 		background: hsl(var(--muted));
-		display: flex;
-		align-items: center;
-		justify-content: center;
 	}
 
 	.media-image {
 		width: 100%;
-		height: 100%;
+		height: auto;
+		max-height: 600px;
 		object-fit: cover;
+		display: block;
 	}
 
 	:global(.media-video) {
 		width: 100%;
-		height: 100%;
-	}
-
-	.no-media {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: hsl(var(--muted-foreground));
-		opacity: 0.5;
+		height: auto;
+		max-height: 600px;
 	}
 
 	/* Post Actions */
diff --git a/src/lib/components/FindPreview.svelte b/src/lib/components/FindPreview.svelte
index d0b80ad..737651d 100644
--- a/src/lib/components/FindPreview.svelte
+++ b/src/lib/components/FindPreview.svelte
@@ -278,7 +278,7 @@
 	/* Mobile styles (bottom sheet) */
 	@media (max-width: 767px) {
 		:global(.sheet-content) {
-			height: 80vh !important;
+			height: 50vh !important;
 			border-radius: 16px 16px 0 0 !important;
 		}
 	}
@@ -414,7 +414,7 @@
 	.media-image {
 		width: 100%;
 		height: 100%;
-		object-fit: cover;
+		object-fit: contain;
 	}
 
 	:global(.media-video) {