fix(reply modal): add minimal timeout to allow rerender when already opened

src/components/post/post.module.css

@@ -426,6 +426,10 @@
   font-weight: 700 !important;
 }
 
+.replyToPost {
+  cursor: pointer;
+}
+
 @media (max-width: 640px) {
   .postDesktop {
     display: none;

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

@@ -61,7 +61,7 @@ const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => {
       const centeredPosition = scrollY + viewportHeight / 2 - modalHeight / 2;
       nodeRef.current.style.top = `${centeredPosition}px`;
     }
-  }, []);
+  }, [isMobile]);
 
   const ReplyForm = React.memo(() => (
     <div className={styles.replyForm}>

src/hooks/use-reply-modal.ts

@@ -4,25 +4,27 @@ const useReplyModal = () => {
   const [showReplyModal, setShowReplyModal] = useState(false);
   const [activeCid, setActiveCid] = useState<string | null>(null);
 
-  const openReplyModal = useCallback(
-    (cid: string) => {
-      if (activeCid && activeCid !== cid) {
-        closeModal(); // close modal if a different CID is clicked
-        setActiveCid(cid);
-        setShowReplyModal(true);
-      } else if (!activeCid) {
-        setActiveCid(cid);
-        setShowReplyModal(true);
-      }
-    },
-    [activeCid],
-  );
-
   const closeModal = useCallback(() => {
     setActiveCid(null);
     setShowReplyModal(false);
   }, []);
 
+  const openReplyModal = useCallback(
+    (cid: string) => {
+      if (activeCid && activeCid !== cid) {
+        closeModal();
+        setTimeout(() => {
+          setActiveCid(cid);
+          setShowReplyModal(true);
+        }, 0); // minimal timeout to allow for state reset
+      } else if (!activeCid) {
+        setActiveCid(cid);
+        setShowReplyModal(true);
+      }
+    },
+    [activeCid, closeModal],
+  );
+
   return { showReplyModal, activeCid, openReplyModal, closeModal };
 };