From 7877c8ae63233cbef78c9cf2fa5540d8911bfe8f Mon Sep 17 00:00:00 2001
From: MOH <info@mohfarawati.de>
Date: Tue, 10 Mar 2026 18:07:47 +0100
Subject: [PATCH] Refine Sonner layout and timing

---
 app/globals.css          | 31 +++++++++++++++++++++++++++++++
 components/ui/sonner.tsx |  5 ++---
 2 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 42648a9..1e8a1f4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -197,6 +197,37 @@ html[lang="ar"] {
   color: hsl(var(--foreground));
 }
 
+[data-sonner-toaster][data-x-position="center"] {
+  left: 0;
+  right: 0;
+  width: 100%;
+  transform: none;
+}
+
+[data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
+  left: 0;
+  right: 0;
+  width: fit-content;
+  min-width: 0;
+  max-width: min(calc(100vw - 2rem), 32rem);
+  margin-inline: auto;
+}
+
+@media (max-width: 600px) {
+  [data-sonner-toaster][data-x-position="center"] {
+    left: 0;
+    right: 0;
+    width: 100%;
+    transform: none;
+  }
+
+  [data-sonner-toaster][data-x-position="center"] [data-sonner-toast] {
+    width: fit-content;
+    max-width: calc(100vw - 2rem);
+    margin-inline: auto;
+  }
+}
+
 @layer utilities {
   .hero-noise {
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx
index 70e7078..1bc75f8 100644
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -21,12 +21,11 @@ export function Toaster(props: ToasterProps) {
     <Sonner
       theme={resolvedTheme as ToasterProps["theme"]}
       position="top-center"
-      duration={2400}
+      duration={1800}
       toastOptions={{
         style: {
           borderRadius: "16px",
           padding: "10px 12px",
-          width: "fit-content",
           minWidth: "0",
           maxWidth: "min(calc(100vw - 2rem), 32rem)",
           background: "hsl(var(--card))",
@@ -36,7 +35,7 @@ export function Toaster(props: ToasterProps) {
         },
         classNames: {
           toast:
-            "w-fit min-w-0 max-w-[min(calc(100vw-2rem),32rem)] rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
+            "min-w-0 max-w-[min(calc(100vw-2rem),32rem)] rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
           default:
             "border-border bg-card text-card-foreground",
           title: "text-[13px] font-medium leading-5",