From 6d6cbbd34c937f4d1a64215d467de0fa82d96db0 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Wed, 7 Jun 2023 11:06:58 +0200
Subject: [PATCH] Fix margin between comments and other card elements

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>
---
 src/components/Thread.svelte    | 84 ++++++++++++++++++---------------
 src/views/projects/Issue.svelte |  6 +--
 2 files changed, 47 insertions(+), 43 deletions(-)

diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index e7b77c1bf..db92a4dce 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -50,13 +50,17 @@
 </script>
 
 <style>
+  .comments {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
   .comment {
     background-color: var(--color-foreground-1);
     border-radius: var(--border-radius);
   }
   .reply {
     margin-left: 3rem;
-    margin-top: 1rem;
   }
   .actions {
     display: flex;
@@ -66,45 +70,47 @@
   }
 </style>
 
-<div class="comment">
-  <CommentComponent
-    {rawPath}
-    id={root.id}
-    authorId={root.author.id}
-    authorAlias={root.author.alias}
-    timestamp={root.timestamp}
-    body={root.body}
-    showReplyIcon={Boolean($httpdStore.state === "authenticated")}
-    on:toggleReply={toggleReply} />
-</div>
-{#each replies as reply}
-  <div class="comment reply">
+<div class="comments">
+  <div class="comment">
     <CommentComponent
       {rawPath}
-      id={reply.id}
-      authorId={reply.author.id}
-      authorAlias={reply.author.alias}
-      timestamp={reply.timestamp}
-      body={reply.body} />
+      id={root.id}
+      authorId={root.author.id}
+      authorAlias={root.author.alias}
+      timestamp={root.timestamp}
+      body={root.body}
+      showReplyIcon={Boolean($httpdStore.state === "authenticated")}
+      on:toggleReply={toggleReply} />
   </div>
-{/each}
-{#if showReplyTextarea}
-  <div id={`reply-${root.id}`} class="reply">
-    <Textarea
-      resizable
-      focus={showReplyTextarea}
-      bind:value={replyText}
-      on:submit={reply}
-      placeholder="Leave your reply" />
-    <div class="actions">
-      <Button variant="text" size="small" on:click={cancel}>Dismiss</Button>
-      <Button
-        variant="secondary"
-        size="small"
-        disabled={!replyText}
-        on:click={reply}>
-        Reply
-      </Button>
+  {#each replies as reply}
+    <div class="comment reply">
+      <CommentComponent
+        {rawPath}
+        id={reply.id}
+        authorId={reply.author.id}
+        authorAlias={reply.author.alias}
+        timestamp={reply.timestamp}
+        body={reply.body} />
     </div>
-  </div>
-{/if}
+  {/each}
+  {#if showReplyTextarea}
+    <div id={`reply-${root.id}`} class="reply">
+      <Textarea
+        resizable
+        focus={showReplyTextarea}
+        bind:value={replyText}
+        on:submit={reply}
+        placeholder="Leave your reply" />
+      <div class="actions">
+        <Button variant="text" size="small" on:click={cancel}>Dismiss</Button>
+        <Button
+          variant="secondary"
+          size="small"
+          disabled={!replyText}
+          on:click={reply}>
+          Reply
+        </Button>
+      </div>
+    </div>
+  {/if}
+</div>
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 93bf94928..ca8677c2d 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -18,7 +18,7 @@
   import Markdown from "@app/components/Markdown.svelte";
   import TagInput from "./Cob/TagInput.svelte";
   import Textarea from "@app/components/Textarea.svelte";
-  import Thread from "@app/components/Thread.svelte";
+  import ThreadComponent from "@app/components/Thread.svelte";
 
   export let issue: Issue;
   export let baseUrl: BaseUrl;
@@ -257,9 +257,7 @@
     </CobHeader>
     <div class="comments">
       {#each threads as thread (thread.root.id)}
-        <div style:margin-top="1rem">
-          <Thread {thread} {rawPath} on:reply={createReply} />
-        </div>
+        <ThreadComponent {thread} {rawPath} on:reply={createReply} />
       {/each}
       <div style:margin-top="1rem">
         {#if $httpdStore.state === "authenticated"}