From a9c3d7e32abc8081733d6ff3fa2d667113a360fa Mon Sep 17 00:00:00 2001
From: Torsten Simon <simon@edu-sharing.net>
Date: Wed, 30 Apr 2025 10:25:40 +0200
Subject: [PATCH] fancy layout, cleanup

---
 src/lib/components/Comment.svelte | 24 ++++++++++++++++++++----
 src/routes/q/[id]/+page.svelte    |  4 ++--
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/Comment.svelte b/src/lib/components/Comment.svelte
index a1103ce..341175e 100644
--- a/src/lib/components/Comment.svelte
+++ b/src/lib/components/Comment.svelte
@@ -49,16 +49,32 @@
 	});
 </script>
 
-<div class="w-full border p-2">
+<div class="comment w-full border p-2">
 	<p>{event.content}</p>
-	<div class="flex gap-2">
+	<div class="flex gap-2 reactions">
 		{#if $reacted}
 			<span>👍 {$reactions.length}</span>
-			<span>Danke für deinen Vote!</span>
+			<span class="thanks">Danke für deinen Vote!</span>
             <button onclick={() => deleteVote()} class="btn">Vote zurückziehen</button>
 		{:else}
-			<button onclick={() => sendReaction()}>👍</button>
+			<button onclick={() => sendReaction()} class="like">👍</button>
 			<span>{$reactions.length}</span>
 		{/if}
 	</div>
 </div>
+<style>
+		.like {
+				cursor: pointer;
+		}
+		.reactions {
+				padding-top: 10px;
+				align-items: center;
+		}
+		.thanks {
+				color: #777;
+		}
+	.comment {
+      border-radius: 20px;
+      border-color: #ccc;
+	}
+</style>
diff --git a/src/routes/q/[id]/+page.svelte b/src/routes/q/[id]/+page.svelte
index c1c2c9a..f8d04a2 100644
--- a/src/routes/q/[id]/+page.svelte
+++ b/src/routes/q/[id]/+page.svelte
@@ -61,7 +61,7 @@
 		<p>Error fetching question: {error.message}</p>
 	{/await}
 
-	<div class="mx-auto flex w-full flex-col items-center justify-center gap-2">
+	<div class="mx-auto flex w-full flex-col items-center justify-center gap-5">
 		{#each $comments as event}
 			<Comment {event} />
 		{/each}
@@ -80,7 +80,7 @@
         height: 100%;
     }
 		.question {
-				border-radius: 10px;
+				border-radius: 20px;
 				border-color: #ccc;
 		}
 </style>
\ No newline at end of file