fix(reply modal): get mobile scroll position from hook before render

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 = (
     <div className={styles.container} ref={nodeRef}>

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<string | null>(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<number>(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;

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 = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
@@ -62,7 +62,7 @@ const Board = () => {
 
   return (
     <div className={styles.content}>
-      {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} />}
+      {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
       {feed.length > 0 && (
         <>
           {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}

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 (
     <div className={styles.content}>
-      {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} />}
+      {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} scrollY={scrollY} />}
       {isInDescriptionView ? (
         <SubplebbitDescription
           avatarUrl={suggested?.avatarUrl}