add:enhance comments list with scroll, limit, and styling

- Add maxComments, showCommentForm and isScrollable props to
CommentsList
to limit displayed comments, toggle the form, and enable a scrollable
comments container. Show a "+N more comments" indicator when limited.
- Adjust CommentForm and list styles (padding, background, flex
behavior, responsive heights). Pass currentUserId and new props from
FindPreview and FindCard where applicable.

src/lib/components/CommentForm.svelte

@@ -74,8 +74,10 @@
 
 <style>
 	.comment-form {
-		padding: 0.75rem 0;
+		padding: 0.75rem 1rem;
 		border-top: 1px solid hsl(var(--border));
+		background: hsl(var(--background));
+		flex-shrink: 0;
 	}
 
 	.input-container {

src/lib/components/CommentsList.svelte

@@ -9,9 +9,19 @@
 		findId: string;
 		currentUserId?: string;
 		collapsed?: boolean;
+		maxComments?: number;
+		showCommentForm?: boolean;
+		isScrollable?: boolean;
 	}
 
-	let { findId, currentUserId, collapsed = true }: CommentsListProps = $props();
+	let {
+		findId,
+		currentUserId,
+		collapsed = true,
+		maxComments,
+		showCommentForm = true,
+		isScrollable = false
+	}: CommentsListProps = $props();
 
 	let isExpanded = $state(!collapsed);
 	let hasLoadedComments = $state(false);
@@ -90,8 +100,8 @@
 					<button class="retry-button" onclick={loadComments}> Try again </button>
 				</div>
 			{:else}
-				<div class="comments">
-					{#each $commentsState.comments as comment (comment.id)}
+				<div class="comments" class:scrollable={isScrollable}>
+					{#each maxComments ? $commentsState.comments.slice(0, maxComments) : $commentsState.comments as comment (comment.id)}
 						<Comment
 							{comment}
 							showDeleteButton={canDeleteComment(comment)}
@@ -100,10 +110,19 @@
 					{:else}
 						<div class="no-comments">No comments yet. Be the first to comment!</div>
 					{/each}
+					{#if maxComments && $commentsState.comments.length > maxComments}
+						<div class="see-more">
+							<div class="see-more-text">
+								+{$commentsState.comments.length - maxComments} more comments
+							</div>
+						</div>
+					{/if}
 				</div>
 			{/if}
 
+			{#if showCommentForm}
 				<CommentForm onSubmit={handleAddComment} />
+			{/if}
 		</div>
 	{/if}
 </div>
@@ -131,12 +150,36 @@
 	.comments-container {
 		border-top: 1px solid hsl(var(--border));
 		margin-top: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		min-height: 0;
 	}
 
 	.comments {
 		padding: 0.75rem 0;
 	}
 
+	.comments.scrollable {
+		flex: 1;
+		overflow-y: auto;
+		padding: 0.75rem 1rem;
+		min-height: 0;
+	}
+
+	.see-more {
+		padding: 0.5rem 0;
+		border-top: 1px solid hsl(var(--border));
+		margin-top: 0.5rem;
+	}
+
+	.see-more-text {
+		text-align: center;
+		color: hsl(var(--muted-foreground));
+		font-size: 0.75rem;
+		font-style: italic;
+	}
+
 	.no-comments {
 		text-align: center;
 		color: hsl(var(--muted-foreground));

src/lib/components/FindCard.svelte

@@ -148,7 +148,13 @@
 	<!-- Comments Section -->
 	{#if showComments}
 		<div class="comments-section">
-			<CommentsList findId={id} {currentUserId} collapsed={false} />
+			<CommentsList
+				findId={id}
+				{currentUserId}
+				collapsed={false}
+				maxComments={5}
+				showCommentForm={true}
+			/>
 		</div>
 	{/if}
 </div>

src/lib/components/FindPreview.svelte

@@ -3,6 +3,7 @@
 	import LikeButton from '$lib/components/LikeButton.svelte';
 	import VideoPlayer from '$lib/components/VideoPlayer.svelte';
 	import ProfilePicture from '$lib/components/ProfilePicture.svelte';
+	import CommentsList from '$lib/components/CommentsList.svelte';
 
 	interface Find {
 		id: string;
@@ -30,9 +31,10 @@
 	interface Props {
 		find: Find | null;
 		onClose: () => void;
+		currentUserId?: string;
 	}
 
-	let { find, onClose }: Props = $props();
+	let { find, onClose, currentUserId }: Props = $props();
 
 	let showModal = $state(true);
 	let currentMediaIndex = $state(0);
@@ -251,6 +253,15 @@
 						</button>
 					</div>
 				</div>
+
+				<div class="comments-section">
+					<CommentsList
+						findId={find.id}
+						{currentUserId}
+						isScrollable={true}
+						showCommentForm={true}
+					/>
+				</div>
 			</div>
 		</SheetContent>
 	</Sheet>
@@ -542,6 +553,30 @@
 		background: hsl(var(--secondary) / 0.8);
 	}
 
+	.comments-section {
+		flex: 1;
+		min-height: 0;
+		border-top: 1px solid hsl(var(--border));
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* Desktop comments section */
+	@media (min-width: 768px) {
+		.comments-section {
+			height: calc(100vh - 400px);
+			min-height: 200px;
+		}
+	}
+
+	/* Mobile comments section */
+	@media (max-width: 767px) {
+		.comments-section {
+			height: calc(80vh - 350px);
+			min-height: 150px;
+		}
+	}
+
 	/* Mobile specific adjustments */
 	@media (max-width: 640px) {
 		:global(.sheet-header) {
@@ -573,5 +608,9 @@
 		.action-button {
 			width: 100%;
 		}
+
+		.comments-section {
+			height: calc(80vh - 380px);
+		}
 	}
 </style>

src/routes/+page.svelte

@@ -288,7 +288,7 @@
 {/if}
 
 {#if selectedFind}
-	<FindPreview find={selectedFind} onClose={closeFindPreview} />
+	<FindPreview find={selectedFind} onClose={closeFindPreview} currentUserId={data.user?.id} />
 {/if}
 
 <style>