From f6e32742f2bfd5deffbc5a12a6b573ff9671bbfc Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Fri, 8 Nov 2024 13:01:40 +0000
Subject: [PATCH] Spacing for emoji buttons search

---
 src/button/ReactionToggleButton.module.css | 13 +++++++++----
 src/button/ReactionToggleButton.tsx        |  5 ++---
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/button/ReactionToggleButton.module.css b/src/button/ReactionToggleButton.module.css
index acb8bb25..d431cedf 100644
--- a/src/button/ReactionToggleButton.module.css
+++ b/src/button/ReactionToggleButton.module.css
@@ -39,12 +39,16 @@
   list-style: none;
 }
 
+.reactionsMenu {
+  min-height: 3em;
+}
+
 .reactionButton {
   padding: 1em;
-  font-size: 1.8em;
-  width: 1.8em;
-  height: 1.8em;
-  border-radius: 1.8em;
+  font-size: 1.4em;
+  width: 1.4em;
+  height: 1.4em;
+  border-radius: 1.4em;
 }
 
 .verticalSeperator {
@@ -59,6 +63,7 @@
   display: flex;
   flex-direction: row;
   gap: var(--cpd-separator-spacing);
+  margin-bottom: var(--cpd-space-3x);
 }
 
 .searchForm > label {
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index 527478b3..85686b0b 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -171,10 +171,9 @@ export function ReactionPopupMenu({
                   onClick={() => setIsSearching(false)}
                 />
               </Form.Root>
-              <Separator />
             </>
           ) : null}
-          <menu>
+          <menu className={styles.reactionsMenu}>
             {filteredReactionSet.map((reaction) => (
               <li className={styles.reactionPopupMenuItem} key={reaction.name}>
                 <Tooltip label={reaction.name}>
@@ -192,7 +191,7 @@ export function ReactionPopupMenu({
           </menu>
         </section>
         {!isSearching ? (
-          <section>
+          <section style={{ marginLeft: "var(--cpd-separator-spacing)" }}>
             <li key="search" className={styles.reactionPopupMenuItem}>
               <Tooltip label={t("common.search")}>
                 <CpdButton