enable overlay for ReplyModal mobile

src/components/CaptchaModal.jsx

@@ -18,7 +18,7 @@ const CaptchaModal = () => {
   const [imageSources, setImageSources] = useState([]);
   const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);
   const [totalChallenges, setTotalChallenges] = useState(0);
-    const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= 480);
   const responseRef = useRef();
   const nodeRef = useRef(null);
 

src/components/ReplyModal.jsx

@@ -205,9 +205,9 @@ const ReplyModal = ({ isOpen, closeModal }) => {
     onRequestClose={closeModal}
     contentLabel="Reply Modal"
     shouldCloseOnEsc={false}
-    shouldCloseOnOverlayClick={false}
+    shouldCloseOnOverlayClick={isMobile}
     selectedStyle={selectedStyle}
-    overlayClassName="hide-modal-overlay">
+    style={isMobile ? ({ overlay: { backgroundColor: "rgba(0,0,0,.25)" }}) : ({ overlay: { backgroundColor: "rgba(0,0,0,0)" }})}>
       <Draggable handle=".modal-header" nodeRef={nodeRef} disabled={isMobile}>
         <div className="modal-content" ref={nodeRef}>
           <div className="modal-header">

src/components/styled/ReplyModal.styled.jsx

@@ -2,10 +2,6 @@ import styled from "styled-components";
 import Modal from "react-modal";
 
 export const StyledModal = styled(Modal)`
-  .hide-modal-overlay {
-    display: none;
-  }
-
   .modal-content {
     position: fixed;
     top: calc(50% - 150px);