Fix reactions spacing

src/components/Comment.svelte

@@ -90,7 +90,7 @@
     align-items: center;
     gap: 0.5rem;
     padding-left: 2rem;
-    height: 22px;
+    margin-left: -0.25rem;
   }
   .edit-buttons {
     display: flex;

src/components/IconButton.svelte

@@ -5,6 +5,7 @@
   export let inline: boolean = false;
   export let loading: boolean = false;
   export let title: string | undefined = undefined;
+  export let stylePadding: string | undefined = undefined;
 </script>
 
 <style>
@@ -35,6 +36,7 @@
 {:else}
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
+    style:padding={stylePadding}
     role="button"
     tabindex="0"
     aria-label={ariaLabel}

src/components/ReactionSelector.svelte

@@ -40,29 +40,32 @@
   }
 </style>
 
-<Popover
-  popoverPositionBottom="2rem"
-  popoverPositionLeft="0"
-  popoverPadding="0">
-  <IconButton
-    slot="toggle"
-    let:toggle
-    on:click={toggle}
-    title="toggle-reaction-popover">
-    <IconSmall name="face" />
-  </IconButton>
+<div style="margin-top: 0.875rem;">
+  <Popover
+    popoverPositionBottom="2rem"
+    popoverPositionLeft="0"
+    popoverPadding="0">
+    <IconButton
+      stylePadding="4px"
+      slot="toggle"
+      let:toggle
+      on:click={toggle}
+      title="toggle-reaction-popover">
+      <IconSmall name="face" />
+    </IconButton>
 
-  <div class="selector" slot="popover">
-    {#each config.reactions as reaction}
-      <button
-        class:active={Boolean(reactions?.get(reaction)?.self)}
-        on:click={() =>
-          dispatch("select", {
-            nids: reactions?.get(reaction)?.all ?? [],
-            reaction,
-          })}>
-        {reaction}
-      </button>
-    {/each}
-  </div>
-</Popover>
+    <div class="selector" slot="popover">
+      {#each config.reactions as reaction}
+        <button
+          class:active={Boolean(reactions?.get(reaction)?.self)}
+          on:click={() =>
+            dispatch("select", {
+              nids: reactions?.get(reaction)?.all ?? [],
+              reaction,
+            })}>
+          {reaction}
+        </button>
+      {/each}
+    </div>
+  </Popover>
+</div>

src/components/Reactions.svelte

@@ -14,6 +14,7 @@
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    margin-top: 0.875rem;
   }
   .reaction {
     display: inline-flex;

src/views/projects/Issue.svelte

@@ -408,7 +408,6 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    gap: 1.5rem;
     background-color: var(--color-background-float);
   }
   .bottom {
@@ -460,8 +459,8 @@
   .reactions {
     display: flex;
     gap: 0.5rem;
-    height: 22px;
-    margin-top: 1rem;
+    align-items: center;
+    margin-left: -0.25rem;
   }
 
   @media (max-width: 720px) {