From 94af84288b44195c7169fe50ccc611499a6a048c Mon Sep 17 00:00:00 2001
From: v0 <v0[bot]@users.noreply.github.com>
Date: Wed, 4 Feb 2026 16:15:15 +0000
Subject: [PATCH] fix: improve ToastClose component visibility and event
 handling

Set default opacity to 100 and stop click event propagation.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
---
 components/ui/toast.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 40eedf5..de90680 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -73,14 +73,18 @@ ToastAction.displayName = ToastPrimitives.Action.displayName
 const ToastClose = React.forwardRef<
   React.ElementRef<typeof ToastPrimitives.Close>,
   React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
+>(({ className, onClick, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-100 transition-opacity hover:text-foreground focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
       className,
     )}
     toast-close=""
+    onClick={(e) => {
+      e.stopPropagation()
+      onClick?.(e)
+    }}
     {...props}
   >
     <X className="h-4 w-4" />