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 };
};