Add margin between comment threads in issue view

Adds also a root level comment to the cobFixture to avoid margin
regressions between root level comments

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

src/views/projects/Issue.svelte

@@ -202,7 +202,7 @@
     flex-wrap: nowrap;
     gap: 0.5rem;
   }
-  .comments {
+  .thread {
     margin: 1rem 0;
   }
   .open {
@@ -263,40 +263,40 @@
         {utils.formatTimestamp(issue.discussion[0].timestamp)}
       </div>
     </CobHeader>
-    <div class="comments">
-      {#each threads as thread (thread.root.id)}
+    {#each threads as thread (thread.root.id)}
+      <div class="thread">
         <ThreadComponent {thread} {rawPath} on:reply={createReply} />
-      {/each}
+      </div>
+    {/each}
+    {#if $httpdStore.state === "authenticated"}
       <div style:margin-top="1rem">
-        {#if $httpdStore.state === "authenticated"}
-          <Textarea
-            resizable
-            on:submit={async () => {
+        <Textarea
+          resizable
+          on:submit={async () => {
+            await createComment(commentBody);
+            commentBody = "";
+          }}
+          bind:value={commentBody}
+          placeholder="Leave your comment" />
+        <div class="actions txt-small">
+          <CobStateButton
+            items={items.filter(([, state]) => !isEqual(state, issue.state))}
+            {selectedItem}
+            state={issue.state}
+            on:saveStatus={saveStatus} />
+          <Button
+            variant="secondary"
+            size="small"
+            disabled={!commentBody}
+            on:click={async () => {
               await createComment(commentBody);
               commentBody = "";
-            }}
-            bind:value={commentBody}
-            placeholder="Leave your comment" />
-          <div class="actions txt-small">
-            <CobStateButton
-              items={items.filter(([, state]) => !isEqual(state, issue.state))}
-              {selectedItem}
-              state={issue.state}
-              on:saveStatus={saveStatus} />
-            <Button
-              variant="secondary"
-              size="small"
-              disabled={!commentBody}
-              on:click={async () => {
-                await createComment(commentBody);
-                commentBody = "";
-              }}>
-              Comment
-            </Button>
-          </div>
-        {/if}
+            }}>
+            Comment
+          </Button>
+        </div>
       </div>
-    </div>
+    {/if}
   </div>
   <div class="metadata">
     <AssigneeInput

tests/support/fixtures.ts

@@ -335,6 +335,15 @@ export async function createCobsFixture(peer: RadiclePeer) {
     ],
     createOptions(projectFolder, 3),
   );
+  await peer.rad(
+    [
+      "comment",
+      issueOne,
+      "--message",
+      "A root level comment after a reply, for margins sake.",
+    ],
+    createOptions(projectFolder, 4),
+  );
 
   const issueTwo = await issue.create(
     peer,