diff --git a/src/components/reply-modal/reply-modal.tsx b/src/components/reply-modal/reply-modal.tsx index ebff5faa..86c66a54 100644 --- a/src/components/reply-modal/reply-modal.tsx +++ b/src/components/reply-modal/reply-modal.tsx @@ -13,9 +13,10 @@ import _ from 'lodash'; interface ReplyModalProps { closeModal: () => void; parentCid: string; + scrollY: number; } -const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => { +const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => { const { t } = useTranslation(); const { subplebbitAddress } = useParams() as { subplebbitAddress: string }; const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid: parentCid, subplebbitAddress }); @@ -56,12 +57,11 @@ const ReplyModal = ({ closeModal, parentCid }: ReplyModalProps) => { useEffect(() => { if (nodeRef.current && isMobile) { const viewportHeight = window.innerHeight; - const scrollY = window.scrollY; const modalHeight = 150; const centeredPosition = scrollY + viewportHeight / 2 - modalHeight / 2; nodeRef.current.style.top = `${centeredPosition}px`; } - }, [isMobile]); + }, [isMobile, scrollY]); const modalContent = (
diff --git a/src/hooks/use-reply-modal.ts b/src/hooks/use-reply-modal.ts index c459cedb..9574a683 100644 --- a/src/hooks/use-reply-modal.ts +++ b/src/hooks/use-reply-modal.ts @@ -1,9 +1,14 @@ import { useState, useCallback } from 'react'; +import useWindowWidth from './use-window-width'; const useReplyModal = () => { const [showReplyModal, setShowReplyModal] = useState(false); const [activeCid, setActiveCid] = useState(null); + // on mobile, the position is absolute instead of fixed, so we need to calculate the top position + const isMobile = useWindowWidth() < 640; + const [scrollY, setScrollY] = useState(0); + const closeModal = useCallback(() => { setActiveCid(null); setShowReplyModal(false); @@ -11,6 +16,9 @@ const useReplyModal = () => { const openReplyModal = useCallback( (cid: string) => { + if (isMobile) { + setScrollY(window.scrollY); + } if (activeCid && activeCid !== cid) { closeModal(); setTimeout(() => { @@ -22,10 +30,10 @@ const useReplyModal = () => { setShowReplyModal(true); } }, - [activeCid, closeModal], + [activeCid, closeModal, isMobile], ); - return { showReplyModal, activeCid, openReplyModal, closeModal }; + return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal }; }; export default useReplyModal; diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index cae7673e..8477d7a3 100644 --- a/src/views/board/board.tsx +++ b/src/views/board/board.tsx @@ -24,7 +24,7 @@ const Board = () => { const subplebbit = useSubplebbit({ subplebbitAddress }); const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {}; - const { showReplyModal, activeCid, openReplyModal, closeModal } = useReplyModal(); + const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal(); const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); const loadingString =
{state === 'failed' ? state : }
; @@ -62,7 +62,7 @@ const Board = () => { return (
- {showReplyModal && activeCid && } + {showReplyModal && activeCid && } {feed.length > 0 && ( <> {rules && rules.length > 0 && } diff --git a/src/views/post-page/post-page.tsx b/src/views/post-page/post-page.tsx index 3a6e26dc..1ee1998d 100644 --- a/src/views/post-page/post-page.tsx +++ b/src/views/post-page/post-page.tsx @@ -22,7 +22,7 @@ const PostPage = () => { const isInDescriptionView = isDescriptionView(location.pathname, params); const isInRulesView = isRulesView(location.pathname, params); - const { showReplyModal, activeCid, openReplyModal, closeModal } = useReplyModal(); + const { activeCid, closeModal, openReplyModal, showReplyModal, scrollY } = useReplyModal(); const post = useComment({ commentCid }); const { deleted, locked, removed } = post || {}; @@ -34,7 +34,7 @@ const PostPage = () => { return (
- {showReplyModal && activeCid && } + {showReplyModal && activeCid && } {isInDescriptionView ? (