From 97c927cbe7daf493dcdbd04a2972b746bbeaa6f5 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Wed, 13 Mar 2024 19:27:39 -0500
Subject: [PATCH] Align toasts to site breakpoints + margins

---
 src/app/layout.tsx              |  1 +
 src/site/sonner.css             | 35 +++++++++++++++++++++++++++++++++
 src/toast/ToasterWithThemes.tsx | 11 +++++++----
 3 files changed, 43 insertions(+), 4 deletions(-)
 create mode 100644 src/site/sonner.css

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7f0c236b..330a3ac4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,6 +16,7 @@ import CommandK from '@/site/CommandK';
 import { ThemeProvider } from 'next-themes';
 
 import '../site/globals.css';
+import '../site/sonner.css';
 
 const ibmPlexMono = IBM_Plex_Mono({
   subsets: ['latin'],
diff --git a/src/site/sonner.css b/src/site/sonner.css
new file mode 100644
index 00000000..1ef6f492
--- /dev/null
+++ b/src/site/sonner.css
@@ -0,0 +1,35 @@
+/* Align toasts to site breakpoints + margins */
+
+@media (max-width: 639px) {
+  [data-sonner-toaster] {
+    position: fixed;
+    --mobile-offset: 12px !important;
+    right: var(--mobile-offset);
+    left: var(--mobile-offset);
+    width: 100% !important;
+  }
+
+  [data-sonner-toaster] [data-sonner-toast] {
+    left: 0;
+    right: 0;
+    width: calc(100% - var(--mobile-offset) * 2) !important;
+  }
+
+  [data-sonner-toaster][data-x-position='left'] {
+    left: var(--mobile-offset);
+  }
+
+  [data-sonner-toaster][data-y-position='bottom'] {
+    bottom: 20px !important;
+  }
+
+  [data-sonner-toaster][data-y-position='top'] {
+    top: 20px;
+  }
+
+  [data-sonner-toaster][data-x-position='center'] {
+    left: var(--mobile-offset);
+    right: var(--mobile-offset);
+    transform: none;
+  }
+}
diff --git a/src/toast/ToasterWithThemes.tsx b/src/toast/ToasterWithThemes.tsx
index 6502754e..b292bb56 100644
--- a/src/toast/ToasterWithThemes.tsx
+++ b/src/toast/ToasterWithThemes.tsx
@@ -10,12 +10,15 @@ export default function ToasterWithThemes() {
     <Toaster
       theme={theme as 'system' | 'light' | 'dark'}
       toastOptions={{
+        unstyled: true,
         classNames: {
           toast: clsx(
-            'font-mono font-normal',
-            '!text-gray-900 dark:!text-gray-100',
-            '!bg-white dark:!bg-black',
-            '!border-gray-200 dark:!border-gray-800',
+            'flex items-center gap-x-1.5 p-4 w-full',
+            'font-mono text-sm',
+            'bg-white dark:bg-black',
+            'text-gray-900 dark:text-gray-100',
+            'border border-gray-200 dark:border-gray-800',
+            'rounded-lg',
           ),
         },
       }}