From 42d7246cff88a1ae25bf58cef2ae66e02e4c770e Mon Sep 17 00:00:00 2001
From: Zias van Nes <vanneszias@icloud.com>
Date: Sat, 22 Nov 2025 11:39:18 +0100
Subject: [PATCH] ui:update findpreview and commentlist

---
 src/lib/components/finds/CommentForm.svelte  |  1 -
 src/lib/components/finds/CommentsList.svelte | 22 ++++++++++++++------
 src/lib/components/finds/FindCard.svelte     |  2 +-
 src/lib/components/finds/FindPreview.svelte  |  7 ++++---
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/finds/CommentForm.svelte b/src/lib/components/finds/CommentForm.svelte
index 08faa7c..2463cbe 100644
--- a/src/lib/components/finds/CommentForm.svelte
+++ b/src/lib/components/finds/CommentForm.svelte
@@ -75,7 +75,6 @@
 <style>
 	.comment-form {
 		padding: 0.75rem 1rem;
-		border-top: 1px solid hsl(var(--border));
 		background: hsl(var(--background));
 		flex-shrink: 0;
 	}
diff --git a/src/lib/components/finds/CommentsList.svelte b/src/lib/components/finds/CommentsList.svelte
index 3b8fb26..e152a1d 100644
--- a/src/lib/components/finds/CommentsList.svelte
+++ b/src/lib/components/finds/CommentsList.svelte
@@ -92,6 +92,12 @@
 
 	{#if isExpanded}
 		<div class="comments-container">
+			{#if showCommentForm}
+				<div class="comment-form-container">
+					<CommentForm onSubmit={handleAddComment} />
+				</div>
+			{/if}
+
 			{#if $commentsState.isLoading && !hasLoadedComments}
 				{@render loadingSkeleton()}
 			{:else if $commentsState.error}
@@ -119,10 +125,6 @@
 					{/if}
 				</div>
 			{/if}
-
-			{#if showCommentForm}
-				<CommentForm onSubmit={handleAddComment} />
-			{/if}
 		</div>
 	{/if}
 </div>
@@ -148,14 +150,21 @@
 	}
 
 	.comments-container {
-		border-top: 1px solid hsl(var(--border));
-		margin-top: 0.5rem;
 		display: flex;
 		flex-direction: column;
 		height: 100%;
 		min-height: 0;
 	}
 
+	.comment-form-container {
+		flex-shrink: 0;
+		border-bottom: 1px solid hsl(var(--border));
+		position: sticky;
+		top: 0;
+		background: hsl(var(--background));
+		z-index: 1;
+	}
+
 	.comments {
 		padding: 0.75rem 0;
 	}
@@ -165,6 +174,7 @@
 		overflow-y: auto;
 		padding: 0.75rem 1rem;
 		min-height: 0;
+		max-height: 300px;
 	}
 
 	.see-more {
diff --git a/src/lib/components/finds/FindCard.svelte b/src/lib/components/finds/FindCard.svelte
index 5d5678b..d1dca54 100644
--- a/src/lib/components/finds/FindCard.svelte
+++ b/src/lib/components/finds/FindCard.svelte
@@ -151,7 +151,7 @@
 			<CommentsList
 				findId={id}
 				{currentUserId}
-				collapsed={false}
+				collapsed={true}
 				maxComments={5}
 				showCommentForm={true}
 			/>
diff --git a/src/lib/components/finds/FindPreview.svelte b/src/lib/components/finds/FindPreview.svelte
index bb4db4c..7ed79a8 100644
--- a/src/lib/components/finds/FindPreview.svelte
+++ b/src/lib/components/finds/FindPreview.svelte
@@ -260,6 +260,7 @@
 					<CommentsList
 						findId={find.id}
 						{currentUserId}
+						collapsed={false}
 						isScrollable={true}
 						showCommentForm={true}
 					/>
@@ -307,7 +308,8 @@
 		width: 100%;
 		min-width: 0;
 		max-width: none;
-		height: 90vh;
+		height: auto;
+		max-height: calc(90vh - 20px);
 		border-radius: 16px 16px 0 0;
 		animation: slideUp 0.3s ease-out;
 	}
@@ -534,7 +536,6 @@
 		gap: 0.5rem;
 		color: hsl(var(--muted-foreground));
 		font-size: 0.875rem;
-		margin-bottom: 1.5rem;
 	}
 
 	.actions {
@@ -588,7 +589,7 @@
 		flex-direction: column;
 		background: rgba(255, 255, 255, 0.5);
 		max-height: 400px;
-		overflow-y: auto;
+		overflow: hidden;
 	}
 
 	/* Mobile specific adjustments */