Merge pull request #3884 from thematters/fix/dialogbeta-handle-clickable

Fix dialogbeta handle clickable on mobile

src/components/DialogBeta/Handle.tsx

@@ -0,0 +1,25 @@
+import { useIntl } from 'react-intl'
+
+import styles from './styles.module.css'
+
+interface HandleProps {
+  closeDialog: () => void
+}
+
+const Handle: React.FC<HandleProps> = ({ closeDialog, ...props }) => {
+  const intl = useIntl()
+
+  return (
+    <button
+      type="button"
+      className={styles.handle}
+      aria-label={intl.formatMessage({ defaultMessage: 'Close' })}
+      onClick={closeDialog}
+      {...props}
+    >
+      <span className={styles.icon} />
+    </button>
+  )
+}
+
+export default Handle

src/components/DialogBeta/index.tsx

@@ -11,11 +11,11 @@ import { capitalizeFirstLetter, dom } from '~/common/utils'
 import { Media, useOutsideClick } from '~/components'
 
 import { RoundedButton, TextButton } from '../Dialog/Buttons'
-import Handle from '../Dialog/Handle'
 import Header from '../Dialog/Header'
 import Lazy from '../Dialog/Lazy'
 import Content from './Content'
 import Footer from './Footer'
+import Handle from './Handle'
 import styles from './styles.module.css'
 
 export interface DialogBetaOverlayProps {

src/components/DialogBeta/styles.module.css

@@ -60,7 +60,7 @@
   position: absolute;
   top: 0;
   left: 50%;
-  z-index: var(--z-index-dialog);
+  z-index: calc(var(--z-index-dialog) + 1);
   padding: var(--spacing-x-tight);
   transform: translateX(-50%);