From cad42f8b8cf90f78eab2a741df1acf789616c3c4 Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 00:06:20 -0300
Subject: [PATCH] fix: let toast width auto-size

---
 web/src/components/ui/sonner.tsx | 45 ++++++++++++++------------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/web/src/components/ui/sonner.tsx b/web/src/components/ui/sonner.tsx
index d13c151..aaaf63f 100644
--- a/web/src/components/ui/sonner.tsx
+++ b/web/src/components/ui/sonner.tsx
@@ -6,17 +6,24 @@ import { Toaster as Sonner, ToasterProps } from "sonner"
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
+  const baseClass =
+    "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg"
+  const baseStyle = {
+    background: "#000",
+    color: "#fff",
+    border: "1px solid #000",
+    width: "fit-content" as const,
+    minWidth: 0,
+    maxWidth: "min(24rem, calc(100vw - 2rem))",
+  }
+
   return (
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
       toastOptions={{
-        className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
-        style: {
-          background: "#000",
-          color: "#fff",
-          border: "1px solid #000",
-        },
+        className: baseClass,
+        style: baseStyle,
         classNames: {
           icon: "size-[14px] text-white [&>svg]:size-[14px] [&>svg]:text-white",
         },
@@ -27,32 +34,18 @@ const Toaster = ({ ...props }: ToasterProps) => {
           primary: "#ffffff",
           secondary: "#000000",
         },
-        success: {
-          className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
-          style: { background: "#000", color: "#fff", border: "1px solid #000" },
-        },
-        error: {
-          className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
-          style: { background: "#000", color: "#fff", border: "1px solid #000" },
-        },
-        info: {
-          className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
-          style: { background: "#000", color: "#fff", border: "1px solid #000" },
-        },
-        warning: {
-          className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
-          style: { background: "#000", color: "#fff", border: "1px solid #000" },
-        },
-        loading: {
-          className: "inline-flex w-auto min-w-0 items-center justify-center gap-2 self-center rounded-xl border border-black bg-black px-3 py-2 text-sm font-medium text-white shadow-lg",
-          style: { background: "#000", color: "#fff", border: "1px solid #000" },
-        },
+        success: { className: baseClass, style: baseStyle },
+        error: { className: baseClass, style: baseStyle },
+        info: { className: baseClass, style: baseStyle },
+        warning: { className: baseClass, style: baseStyle },
+        loading: { className: baseClass, style: baseStyle },
       }}
       style={
         {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
+          "--width": "fit-content",
         } as React.CSSProperties
       }
       {...props}