sepehr
1cbada87f4
CRITICAL FIX: Toast notifications were blocking all UI interaction, requiring a page refresh (F5) to click buttons again. Root cause: The [data-sonner-toaster] container was capturing all pointer events, preventing clicks on the page underneath. Solution: - Added CSS: pointer-events: none on [data-sonner-toaster] - Added CSS: pointer-events: auto on [data-sonner-toast] - This allows the toast itself to be interactive (buttons, close) - But lets clicks pass through to the page underneath After this fix, users can continue working immediately after a toast appears without refreshing the page. Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
29 lines
650 B
TypeScript
29 lines
650 B
TypeScript
'use client'
|
|
|
|
import { Toaster as SonnerToaster, toast as sonnerToast } from 'sonner'
|
|
|
|
// Re-export toast functions from Sonner
|
|
export const toast = sonnerToast
|
|
|
|
// Toaster component with custom styles
|
|
export function Toaster() {
|
|
return (
|
|
<SonnerToaster
|
|
position="top-right"
|
|
expand={false}
|
|
richColors
|
|
closeButton
|
|
duration={3000}
|
|
className="toaster"
|
|
toastOptions={{
|
|
classNames: {
|
|
toast: 'toast pointer-events-auto',
|
|
description: 'toast-description',
|
|
actionButton: 'toast-action-button',
|
|
closeButton: 'toast-close-button',
|
|
},
|
|
}}
|
|
/>
|
|
)
|
|
}
|