Make Sonner width fit toast content

components/ui/sonner.tsx

@@ -26,6 +26,9 @@ export function Toaster(props: ToasterProps) {
         style: {
           borderRadius: "16px",
           padding: "10px 12px",
+          width: "fit-content",
+          minWidth: "0",
+          maxWidth: "min(calc(100vw - 2rem), 32rem)",
           background: "hsl(var(--card))",
           color: "hsl(var(--card-foreground))",
           border: "1px solid hsl(var(--border))",
@@ -33,7 +36,7 @@ export function Toaster(props: ToasterProps) {
         },
         classNames: {
           toast:
-            "rounded-[16px] border border-border bg-card px-3 py-2 text-card-foreground shadow-panel",
+            "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",
           default:
             "border-border bg-card text-card-foreground",
           title: "text-[13px] font-medium leading-5",