Fix mobile view for emoji picker.

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}>

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