From 54f7afa0ef65c6ced9e56815b2a8229a04ea473f Mon Sep 17 00:00:00 2001
From: Half-Shot <will@half-shot.uk>
Date: Thu, 7 Nov 2024 16:53:00 +0000
Subject: [PATCH] Fix mobile view for emoji picker.

---
 src/Modal.tsx                       | 14 ++++++++++++--
 src/button/ReactionToggleButton.tsx |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index b8f75305..f457bd0b 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -34,6 +34,14 @@ export interface Props {
   hideHeader?: boolean;
   children: ReactNode;
   className?: string;
+  /**
+   * Class name to be used when in drawer mode (touchscreen). If `className` is given, this is ignored.
+   */
+  classNameDrawer?: string;
+  /**
+   * Class name to be used when in modal mode (desktop). If `className` is given, this is ignored.
+   */
+  classNameModal?: string;
   /**
    * The controlled open state of the modal.
    */
@@ -62,6 +70,8 @@ export const Modal: FC<Props> = ({
   hideHeader,
   children,
   className,
+  classNameDrawer,
+  classNameModal,
   open,
   onDismiss,
   tabbed,
@@ -89,7 +99,7 @@ export const Modal: FC<Props> = ({
           <Drawer.Overlay className={classNames(overlayStyles.bg)} />
           <Drawer.Content
             className={classNames(
-              className,
+              className ?? classNameDrawer,
               overlayStyles.overlay,
               styles.modal,
               styles.drawer,
@@ -147,12 +157,12 @@ export const Modal: FC<Props> = ({
           <DialogContent asChild aria-describedby={undefined} {...rest}>
             <Glass
               className={classNames(
+                className ?? classNameModal,
                 overlayStyles.overlay,
                 overlayStyles.animate,
                 styles.modal,
                 styles.dialog,
                 { [styles.tabbed]: tabbed },
-                className,
               )}
             >
               <div className={styles.content}>
diff --git a/src/button/ReactionToggleButton.tsx b/src/button/ReactionToggleButton.tsx
index 49b07879..d08ffbb0 100644
--- a/src/button/ReactionToggleButton.tsx
+++ b/src/button/ReactionToggleButton.tsx
@@ -309,7 +309,7 @@ export function ReactionToggleButton({
         open={showReactionsMenu}
         title="Pick reaction"
         hideHeader
-        className={styles.reactionPopupMenuModal}
+        classNameModal={styles.reactionPopupMenuModal}
         onDismiss={() => setShowReactionsMenu(false)}
       >
         <ReactionPopupMenu