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,67 +54,74 @@ 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={styles.container} ref={nodeRef}>
+      <div className={`challengeHandle ${styles.title}`}>
-        <div className={`challengeHandle ${styles.title}`}>
+        Challenge for {publicationType}
-          Challenge for {publicationType}
+        <button className={styles.closeIcon} onClick={closeModal} title='close' />
-          <button className={styles.closeIcon} onClick={closeModal} title='close' />
+      </div>
+      <div className={styles.publication}>
+        <div className={styles.name}>
+          <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
         </div>
-        <div className={styles.publication}>
+        {title && (
-          <div className={styles.name}>
+          <div className={styles.subject}>
-            <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
+            <input type='text' value={title} disabled />
           </div>
-          {title && (
+        )}
-            <div className={styles.subject}>
+        {content && (
-              <input type='text' value={title} disabled />
+          <div className={styles.content}>
-            </div>
+            <textarea value={content} disabled cols={48} rows={4} wrap='soft' />
-          )}
-          {content && (
-            <div className={styles.content}>
-              <textarea value={content} disabled cols={48} rows={4} wrap='soft' />
-            </div>
-          )}
-          {link && (
-            <div className={styles.link}>
-              <input type='text' value={link} disabled />
-            </div>
-          )}
-          <div className={styles.challengeContainer}>
-            <input
-              className={styles.challengeAnswer}
-              type='text'
-              autoComplete='off'
-              autoCorrect='off'
-              spellCheck='false'
-              placeholder='TYPE THE ANSWER HERE AND PRESS ENTER'
-              onKeyDown={onEnterKey}
-              onChange={onAnswersChange}
-              value={answers[currentChallengeIndex] || ''}
-              autoFocus
-            />
-            <div className={styles.challengeMediaWrapper}>
-              {isTextChallenge && <div className={styles.challengeMedia}>{challenges[currentChallengeIndex]?.challenge}</div>}
-              {isImageChallenge && (
-                <img alt={t('loading')} className={styles.challengeMedia} src={`data:image/png;base64,${challenges[currentChallengeIndex]?.challenge}`} />
-              )}
-            </div>
           </div>
-          <div className={styles.challengeFooter}>
+        )}
-            <div className={styles.counter}>{t('challenge_counter', { index: currentChallengeIndex + 1, total: challenges?.length })}</div>
+        {link && (
-            <span className={styles.buttons}>
+          <div className={styles.link}>
-              {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
+            <input type='text' value={link} disabled />
-              {challenges.length > 1 && (
-                <button disabled={!challenges[currentChallengeIndex - 1]} onClick={() => setCurrentChallengeIndex((prev) => prev - 1)}>
-                  {t('previous')}
-                </button>
-              )}
-              {challenges[currentChallengeIndex + 1] && <button onClick={() => setCurrentChallengeIndex((prev) => prev + 1)}>{t('next')}</button>}
-            </span>
           </div>
+        )}
+        <div className={styles.challengeContainer}>
+          <input
+            className={styles.challengeAnswer}
+            type='text'
+            autoComplete='off'
+            autoCorrect='off'
+            spellCheck='false'
+            placeholder='TYPE THE ANSWER HERE AND PRESS ENTER'
+            onKeyDown={onEnterKey}
+            onChange={onAnswersChange}
+            value={answers[currentChallengeIndex] || ''}
+            autoFocus
+          />
+          <div className={styles.challengeMediaWrapper}>
+            {isTextChallenge && <div className={styles.challengeMedia}>{challenges[currentChallengeIndex]?.challenge}</div>}
+            {isImageChallenge && (
+              <img alt={t('loading')} className={styles.challengeMedia} src={`data:image/png;base64,${challenges[currentChallengeIndex]?.challenge}`} />
+            )}
+          </div>
+        </div>
+        <div className={styles.challengeFooter}>
+          <div className={styles.counter}>{t('challenge_counter', { index: currentChallengeIndex + 1, total: challenges?.length })}</div>
+          <span className={styles.buttons}>
+            {!challenges[currentChallengeIndex + 1] && <button onClick={onSubmit}>{t('submit')}</button>}
+            {challenges.length > 1 && (
+              <button disabled={!challenges[currentChallengeIndex - 1]} onClick={() => setCurrentChallengeIndex((prev) => prev - 1)}>
+                {t('previous')}
+              </button>
+            )}
+            {challenges[currentChallengeIndex + 1] && <button onClick={() => setCurrentChallengeIndex((prev) => prev + 1)}>{t('next')}</button>}
+          </span>
         </div>
       </div>
+    </div>
+  );
+
+  return isMobile ? (
+    modalContent
+  ) : (
+    <Draggable handle='.challengeHandle' nodeRef={nodeRef}>
+      {modalContent}
     </Draggable>
   );
 };