Web:components:Toast Fixed bug 60587

packages/components/toast/index.js

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { cssTransition } from "react-toastify";
 
 import PropTypes from "prop-types";
 import StyledToastContainer from "./styled-toast";
+import { isMobileOnly } from "react-device-detect";
 
 const Slide = cssTransition({
   enter: "SlideIn",
@@ -10,6 +11,8 @@ const Slide = cssTransition({
 });
 
 const Toast = (props) => {
+  const [offset, setOffset] = useState(0);
+
   const onToastClick = () => {
     let documentElement = document.getElementsByClassName("Toastify__toast");
     if (documentElement.length > 1)
@@ -19,6 +22,22 @@ const Toast = (props) => {
       }
   };
 
+  const onResize = useCallback((event) => {
+    const topOffset = event.target.innerHeight - window.visualViewport.height;
+
+    setOffset(topOffset);
+  }, []);
+
+  useEffect(() => {
+    if (isMobileOnly) {
+      window.addEventListener("resize", onResize);
+    }
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
   return (
     <StyledToastContainer
       theme={props.theme}
@@ -32,6 +51,7 @@ const Toast = (props) => {
       style={props.style}
       transition={Slide}
       onClick={onToastClick}
+      $topOffset={offset}
     />
   );
 };

packages/components/toast/styled-toast.js

@@ -11,7 +11,7 @@ const StyledToastContainer = styled(ToastContainer)`
   width: ${(props) => props.theme.toast.width};
   box-sizing: border-box;
   color: ${(props) => props.theme.toast.color};
-  top: ${(props) => props.theme.toast.top};
+  top: ${(props) => parseInt(props.theme.toast.top) + props.$topOffset + "px"};
   right: ${(props) => props.theme.toast.right};
   margin-top: ${(props) => props.theme.toast.marginTop};
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);