Align toasts to site breakpoints + margins

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'],

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;
+  }
+}

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',
           ),
         },
       }}