feat(reply modal): disable draggable on mobile and calculate absolute top position

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

@@ -58,3 +58,13 @@
   float: right;
   cursor: pointer;
 }
+
+@media (max-width: 640px) {
+  .container {
+    position: absolute;
+  }
+
+  .title {
+    cursor: default;
+  }
+}

src/components/reply-modal/reply-modal.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import Draggable from 'react-draggable';
@@ -6,6 +6,7 @@ import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { useAccount } from '@plebbit/plebbit-react-hooks';
 import { isValidURL } from '../../lib/utils/url-utils';
 import useReply from '../../hooks/use-reply';
+import useWindowWidth from '../../hooks/use-window-width';
 import styles from './reply-modal.module.css';
 import _ from 'lodash';
 
@@ -48,31 +49,63 @@ const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => {
     }
   }, [replyIndex, resetContent, closeModal]);
 
-  // react-draggable requires a ref to the modal node
+  const nodeRef = useRef<HTMLDivElement>(null);
-  const nodeRef = useRef(null);
+  const isMobile = useWindowWidth() < 640;
 
-  return (
+  // on mobile, the position is absolute instead of fixed, so we need to calculate the top position
-    <Draggable handle='.replyModalHandle' nodeRef={nodeRef}>
+  useEffect(() => {
-      <div className={styles.container} ref={nodeRef}>
+    if (nodeRef.current && isMobile) {
-        <div className={`replyModalHandle ${styles.title}`}>
+      const viewportHeight = window.innerHeight;
-          Reply to c/{parentCid && Plebbit.getShortCid(parentCid)}
+      const scrollY = window.scrollY;
-          <button className={styles.closeIcon} onClick={closeModal} title='close' />
+      const modalHeight = 150;
-        </div>
+      const centeredPosition = scrollY + viewportHeight / 2 - modalHeight / 2;
-        <div className={styles.replyForm}>
+      nodeRef.current.style.top = `${centeredPosition}px`;
-          <div className={styles.name}>
+    }
-            <input type='text' defaultValue={displayName} placeholder={displayName ? undefined : _.capitalize(t('anonymous'))} />
+  }, []);
-          </div>
+
-          <div className={styles.link}>
+  const ReplyForm = React.memo(() => (
-            <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
+    <div className={styles.replyForm}>
-          </div>
+      <div className={styles.name}>
-          <div className={styles.content}>
+        <input type='text' defaultValue={displayName} placeholder={displayName ? undefined : _.capitalize(t('anonymous'))} />
-            <textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
-          </div>
-          <div className={styles.footer}>
-            <button onClick={onPublishReply}>{t('reply')}</button>
-          </div>
-        </div>
       </div>
+      <div className={styles.link}>
+        <input type='text' ref={urlRef} placeholder={_.capitalize(t('link'))} onChange={(e) => setContent.link(e.target.value)} />
+      </div>
+      <div className={styles.content}>
+        <textarea cols={48} rows={4} wrap='soft' ref={textRef} placeholder={_.capitalize(t('comment'))} onChange={(e) => setContent.content(e.target.value)} />
+      </div>
+      <div className={styles.footer}>
+        <button onClick={onPublishReply}>{t('reply')}</button>
+      </div>
+    </div>
+  ));
+
+  const ModalTitle = () => (
+    <div className={`replyModalHandle ${styles.title}`}>
+      Reply to c/{parentCid && Plebbit.getShortCid(parentCid)}
+      <button
+        className={styles.closeIcon}
+        onClick={(e) => {
+          e.stopPropagation();
+          closeModal();
+        }}
+        title='close'
+      />
+    </div>
+  );
+
+  const modalContent = (
+    <div className={styles.container} ref={nodeRef}>
+      <ModalTitle />
+      <ReplyForm />
+    </div>
+  );
+
+  return isMobile ? (
+    modalContent
+  ) : (
+    <Draggable handle='.replyModalHandle' nodeRef={nodeRef}>
+      {modalContent}
     </Draggable>
   );
 };