diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 4e7d3b7c..0ff6cc29 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -426,6 +426,10 @@ font-weight: 700 !important; } +.replyToPost { + cursor: pointer; +} + @media (max-width: 640px) { .postDesktop { display: none; diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index c914fdec..e8e4dfee 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/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(() => (
diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts index 01e3ddc8..c459cedb 100644 --- a/src/hooks/use-reply-modal.ts +++ b/src/hooks/use-reply-modal.ts @@ -4,25 +4,27 @@ const useReplyModal = () => { const [showReplyModal, setShowReplyModal] = useState(false); const [activeCid, setActiveCid] = useState(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 }; };