fix: minor issues on mobile with dropdownMenu and emojiReactMenu

BDX-town · Mar 24, 2024 · 8635155 · 8635155
1 parent eb200e3
commit 8635155
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 6 deletions.
diff --git 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
@@ -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)' }}
         >