feat: add options to configure offsets on mobile (#526)

Author: CHC383

src/index.tsx

@@ -22,6 +22,8 @@ const VISIBLE_TOASTS_AMOUNT = 3;
 
 // Viewport padding
 const VIEWPORT_OFFSET = '32px';
+const MOBILE_VIEWPORT_X_OFFSET = '16px';
+const MOBILE_VIEWPORT_Y_OFFSET = '20px';
 
 // Default lifetime of a toasts (in ms)
 const TOAST_LIFETIME = 4000;
@@ -109,7 +111,7 @@ const Toast = (props: ToastProps) => {
   const [y, x] = position.split('-');
   const toastsHeightBefore = React.useMemo(() => {
     return heights.reduce((prev, curr, reducerIndex) => {
-      // Calculate offset up until current  toast
+      // Calculate offset up until current toast
       if (reducerIndex >= heightIndex) {
         return prev;
       }
@@ -482,6 +484,8 @@ const Toaster = forwardRef<HTMLElement, ToasterProps>(function Toaster(props, re
     closeButton,
     className,
     offset,
+    mobileXOffset,
+    mobileYOffset,
     theme = 'light',
     richColors,
     duration,
@@ -676,6 +680,10 @@ const Toaster = forwardRef<HTMLElement, ToasterProps>(function Toaster(props, re
               {
                 '--front-toast-height': `${heights[0]?.height || 0}px`,
                 '--offset': typeof offset === 'number' ? `${offset}px` : offset || VIEWPORT_OFFSET,
+                '--mobile-x-offset':
+                  typeof mobileXOffset === 'number' ? `${mobileXOffset}px` : mobileXOffset || MOBILE_VIEWPORT_X_OFFSET,
+                '--mobile-y-offset':
+                  typeof mobileYOffset === 'number' ? `${mobileYOffset}px` : mobileYOffset || MOBILE_VIEWPORT_Y_OFFSET,
                 '--width': `${TOAST_WIDTH}px`,
                 '--gap': `${gap}px`,
                 ...style,

src/styles.css

@@ -369,37 +369,36 @@
 @media (max-width: 600px) {
   [data-sonner-toaster] {
     position: fixed;
-    --mobile-offset: 16px;
-    right: var(--mobile-offset);
-    left: var(--mobile-offset);
+    right: var(--mobile-x-offset);
+    left: var(--mobile-x-offset);
     width: 100%;
   }
 
   [data-sonner-toaster][dir='rtl'] {
-    left: calc(var(--mobile-offset) * -1);
+    left: calc(var(--mobile-x-offset) * -1);
   }
 
   [data-sonner-toaster] [data-sonner-toast] {
     left: 0;
     right: 0;
-    width: calc(100% - var(--mobile-offset) * 2);
+    width: calc(100% - var(--mobile-x-offset) * 2);
   }
 
   [data-sonner-toaster][data-x-position='left'] {
-    left: var(--mobile-offset);
+    left: var(--mobile-x-offset);
   }
 
   [data-sonner-toaster][data-y-position='bottom'] {
-    bottom: 20px;
+    bottom: max(var(--mobile-y-offset), env(safe-area-inset-bottom));
   }
 
   [data-sonner-toaster][data-y-position='top'] {
-    top: 20px;
+    top: max(var(--mobile-y-offset), env(safe-area-inset-top));
   }
 
   [data-sonner-toaster][data-x-position='center'] {
-    left: var(--mobile-offset);
-    right: var(--mobile-offset);
+    left: var(--mobile-x-offset);
+    right: var(--mobile-x-offset);
     transform: none;
   }
 }

src/types.ts

@@ -120,6 +120,8 @@ export interface ToasterProps {
   className?: string;
   style?: React.CSSProperties;
   offset?: string | number;
+  mobileXOffset?: string | number;
+  mobileYOffset?: string | number;
   dir?: 'rtl' | 'ltr' | 'auto';
   /**
    * @deprecated Please use the `icons` prop instead:

website/src/pages/toaster.mdx

@@ -58,6 +58,8 @@ Changes the directionality of the toast's text.
 | position              |                                             Place where the toasts will be rendered                                             |                      `bottom-right` |
 | closeButton           |                                                Adds a close button to all toasts                                                |                             `false` |
 | offset                |                                              Offset from the edges of the screen.                                               |                              `32px` |
+| mobileXOffset         |                                    Offset from the left/right edges of the screen on mobile.                                    |                              `16px` |
+| mobileYOffset         |                                    Offset from the top/bottom edges of the screen on mobile.                                    |                              `20px` |
 | dir                   |                                                 Directionality of toast's text                                                  |                               `ltr` |
 | hotkey                |                                   Keyboard shortcut that will move focus to the toaster area.                                   |                         `⌥/alt + T` |
 | invert                |                                            Dark toasts in light mode and vice versa.                                            |                             `false` |