Change toast positioning to absolute

This allows you to overwrite position fixed, making it possible to position the Toaster relative Fixes #60
timolins · Mar 21, 2021 · 781b16f · 781b16f
1 parent 06e271c
commit 781b16f
Showing 1 changed file with 7 additions and 3 deletions.
diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
@@ -31,7 +31,7 @@ const getPositionStyle = (
       };
   return {
     display: 'flex',
-    position: 'fixed',
+    position: 'absolute',
     transition: 'all 230ms cubic-bezier(.21,1.02,.73,1)',
     transform: `translateY(${offset * (top ? 1 : -1)}px)`,
     ...verticalStyle,
@@ -58,8 +58,13 @@ export const Toaster: React.FC<ToasterProps> = ({
   return (
     <div
       style={{
-        position: 'fixed',
+        top: 16,
+        left: 16,
+        right: 16,
+        bottom: 16,
         zIndex: 9999,
+        pointerEvents: 'none',
+        position: 'fixed',
         ...containerStyle,
       }}
       onMouseEnter={handlers.startPause}
@@ -83,7 +88,6 @@ export const Toaster: React.FC<ToasterProps> = ({
             key={t.id}
             style={{
               zIndex: t.visible ? 9999 : undefined,
-              margin: 16,
               ...positionStyle,
             }}
           >