fix(challenge modal): disable draggable on mobile

src/components/challenge-modal/challenge-modal.module.css

@@ -78,3 +78,9 @@
   filter: var(--filter80);
   text-transform: capitalize;
 }
+
+@media (max-width: 640px) {
+  .title {
+    cursor: default;
+  }
+}

src/components/challenge-modal/challenge-modal.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { Challenge as ChallengeType } from '@plebbit/plebbit-react-hooks';
 import { getPublicationType } from '../../lib/utils/challenge-utils';
 import useChallenges from '../../hooks/use-challenges';
+import useWindowWidth from '../../hooks/use-window-width';
 import styles from './challenge-modal.module.css';
 import _ from 'lodash';
 
@@ -53,9 +54,9 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
 
   // react-draggable requires a ref to the modal node
   const nodeRef = useRef(null);
+  const isMobile = useWindowWidth() < 640;
 
-  return (
+  const modalContent = (
-    <Draggable handle='.challengeHandle' nodeRef={nodeRef}>
     <div className={styles.container} ref={nodeRef}>
       <div className={`challengeHandle ${styles.title}`}>
         Challenge for {publicationType}
@@ -114,6 +115,13 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
         </div>
       </div>
     </div>
+  );
+
+  return isMobile ? (
+    modalContent
+  ) : (
+    <Draggable handle='.challengeHandle' nodeRef={nodeRef}>
+      {modalContent}
     </Draggable>
   );
 };