From 8635155585196d996c243c46b1d30c2a54fe4bc5 Mon Sep 17 00:00:00 2001
From: Clovis <clovis@synapse-medicine.com>
Date: Sun, 24 Mar 2024 10:52:23 +0100
Subject: [PATCH] fix: minor issues on mobile with dropdownMenu and
 emojiReactMenu

---
 app/soapbox/components/emoji-button-wrapper.tsx | 7 +++----
 app/soapbox/components/modal_root.js            | 4 ++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 830e31ab4..ae358b8ba 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
 import { Map as ImmutableMap } from 'immutable';
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { usePopper } from 'react-popper';
 import { useDispatch } from 'react-redux';
@@ -118,14 +118,13 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
 
 
   return (
-    <div ref={root} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} >
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div ref={root} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleClick}>
       { children}
       {
         visible && (
           ReactDOM.createPortal((
             <div
-              role='menu'
-              onClick={handleClick}
               className='z-50 transition-opacity duration-100'
               ref={setPopperElement}
               style={styles.popper}
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 60ecbe078..3d0e57cf1 100644
--- a/app/soapbox/components/modal_root.js
+++ b/app/soapbox/components/modal_root.js
@@ -219,8 +219,8 @@ class ModalRoot extends React.PureComponent {
         <div
           role='dialog'
           className={classNames({
-            'h-full my-2 mx-auto relative pointer-events-none flex items-center': true,
-            'p-4 md:p-0': type !== 'MEDIA',
+            'h-full mx-auto relative pointer-events-none flex items-center': true,
+            'md:p-0': type !== 'MEDIA',
           })}
           style={{ minHeight: 'calc(100% - 3.5rem)' }}
         >