diff --git a/apps/client/src/components/ui/emoji-picker.tsx b/apps/client/src/components/ui/emoji-picker.tsx
index aff2e7f7..952c1171 100644
--- a/apps/client/src/components/ui/emoji-picker.tsx
+++ b/apps/client/src/components/ui/emoji-picker.tsx
@@ -68,8 +68,8 @@ function EmojiPicker({
           {icon}
         </ActionIcon>
       </Popover.Target>
-      <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
-        <Suspense fallback={null}>
+      <Suspense fallback={null}>
+        <Popover.Dropdown bg="000" style={{ border: "none" }} ref={setDropdown}>
           <Picker
             data={async () => (await import("@emoji-mart/data")).default}
             onEmojiSelect={handleEmojiSelect}
@@ -77,22 +77,22 @@ function EmojiPicker({
             skinTonePosition="search"
             theme={colorScheme}
           />
-        </Suspense>
-        <Button
-          variant="default"
-          c="gray"
-          size="xs"
-          style={{
-            position: "absolute",
-            zIndex: 2,
-            bottom: "1rem",
-            right: "1rem",
-          }}
-          onClick={handleRemoveEmoji}
-        >
-          {t("Remove")}
-        </Button>
-      </Popover.Dropdown>
+          <Button
+            variant="default"
+            c="gray"
+            size="xs"
+            style={{
+              position: "absolute",
+              zIndex: 2,
+              bottom: "1rem",
+              right: "1rem",
+            }}
+            onClick={handleRemoveEmoji}
+          >
+            {t("Remove")}
+          </Button>
+        </Popover.Dropdown>
+      </Suspense>
     </Popover>
   );
 }