From 0f0d41615be3baf3769d7bd6f3157916c9b3154a Mon Sep 17 00:00:00 2001
From: Jan <me@janderedev.xyz>
Date: Wed, 26 Oct 2022 09:13:14 +0200
Subject: [PATCH] fix: properly align emoji name in autocompletion

---
 src/components/common/AutoComplete.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/common/AutoComplete.tsx b/src/components/common/AutoComplete.tsx
index 4691125e..0ba18214 100644
--- a/src/components/common/AutoComplete.tsx
+++ b/src/components/common/AutoComplete.tsx
@@ -432,7 +432,12 @@ export default function AutoComplete({
                                 })
                             }
                             onClick={onClick}>
-                            <div>
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "row",
+                                    justifyContent: "center",
+                                }}>
                                 {match instanceof CustomEmoji ? (
                                     <img
                                         loading="lazy"
@@ -455,11 +460,11 @@ export default function AutoComplete({
                                         size={20}
                                     />
                                 )}
-                                {`:${
+                                <span style={{ paddingLeft: "4px" }}>{`:${
                                     match instanceof CustomEmoji
                                         ? match.name
                                         : match
-                                }:`}
+                                }:`}</span>
                             </div>
                             {match instanceof CustomEmoji &&
                                 match.parent.type == "Server" && (