Fix toast behaviour in mobile

Telefonica · Nov 23, 2024 · 07b64ff · 07b64ff
1 parent 93eb28f
commit 07b64ff
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/pages/advent-calendar-2024/components/toast-wrapper.jsx b/src/pages/advent-calendar-2024/components/toast-wrapper.jsx
@@ -1,16 +1,18 @@
 import { useState, useEffect } from "react";
 import Toast from "./toast"; // Assuming your Toast component is already implemented
-import { Stack } from "@telefonica/mistica";
+import { Stack, useScreenSize } from "@telefonica/mistica";
 
 const ToastWrapper = ({ toasts, removeToast }) => {
   const totalToasts = toasts.length;
+  const { isMobile } = useScreenSize();
 
   return (
     <div
       style={{
-        position: "absolute",
+        position: "fixed",
         bottom: "16px",
-        right: "16px",
+        right: isMobile ? "0" : "16px",
+        padding: isMobile ? "0 16px" : "0",
       }}
     >
       <Stack space={8}>

diff --git a/src/pages/advent-calendar-2024/components/toast.jsx b/src/pages/advent-calendar-2024/components/toast.jsx
@@ -8,6 +8,7 @@ import {
   ButtonLink,
   IconButton,
   IconCloseRegular,
+  useScreenSize,
 } from "@telefonica/mistica";
 import styles from "./toast.module.css";
 
@@ -25,6 +26,8 @@ const Toast = ({
   const [isHovered, setIsHovered] = useState(false);
   const timeoutRef = useRef(null);
 
+  const { isMobile } = useScreenSize();
+
   const clearHideTimeout = () => {
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -77,7 +80,7 @@ const Toast = ({
         borderRadius: "8px",
         border: `2px solid ${skinVars.colors.border}`,
         zIndex: 1000,
-        width: "480px",
+        width: isMobile ? "calc(100vw - 32px)" : "480px",
         ...style,
       }}
       onMouseEnter={() => setIsHovered(true)} // Trigger hover state