feat: add edit menu on mobile

src/components/post/edit-menu/edit-menu.module.css

@@ -88,4 +88,17 @@
   .banInput {
     width: 3.5em;
   }
+}
+
+
+@media (max-width: 640px) {
+  .checkbox {
+    padding-left: 0;
+    padding-bottom: 0;
+  }
+
+  .replyCheckbox {
+    padding-left: 5px;
+    padding-top: 0;
+  }
 }

src/components/post/edit-menu/edit-menu.tsx

@@ -1,5 +1,5 @@
-import { Trans, useTranslation } from 'react-i18next';
 import { useEffect, useRef, useState } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
 import { autoUpdate, flip, FloatingFocusManager, offset, shift, useClick, useDismiss, useFloating, useId, useInteractions, useRole } from '@floating-ui/react';
 import { PublishCommentEditOptions, useComment, useEditedComment, usePublishCommentEdit } from '@plebbit/plebbit-react-hooks';
 import styles from './edit-menu.module.css';
@@ -58,13 +58,6 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
     },
   };
 
-  useEffect(() => {
-    if (!isEditMenuOpen) {
-      setPublishCommentEditOptions(defaultPublishOptions);
-      setIsContentEditorOpen(false);
-    }
-  }, [isEditMenuOpen]);
-
   const [publishCommentEditOptions, setPublishCommentEditOptions] = useState(defaultPublishOptions);
   const { publishCommentEdit } = usePublishCommentEdit(publishCommentEditOptions);
 
@@ -130,7 +123,7 @@ const EditMenu = ({ commentCid, isAccountMod, isAccountCommentAuthor, isCommentA
 
   return (
     <>
-      <span className={styles.checkbox} ref={refs.setReference} {...(commentCid && getReferenceProps())}>
+      <span className={`${styles.checkbox} ${isReply && styles.replyCheckbox}`} ref={refs.setReference} {...(commentCid && getReferenceProps())}>
         <input
           type='checkbox'
           onChange={() => commentCid && setIsEditMenuOpen(!isEditMenuOpen)}