Add documentation to the toast.custom section explaining that custom toasts need the pointer-events: auto CSS property

[shenders13]

Background

By default, the Toaster provider fills the entire viewport (see screenshot below).

In order to allow background UI elements (i.e. elements in the entire app) to be clicked on, the Toaster provider has pointer-events: none which makes click events pass-through to whatever elements are in the background.

The problem

If you have a custom toast, the Toaster provider's pointer-events: none will prevent click events on your custom toast. This is not a problem with the default success/error toasts because pointer-events: auto is set here for the default toasts.

However, if you're making your own custom toast using the toast.custom() API, you have to add pointer-events: auto to your custom toast so that the custom Toast can be clicked on. This wasn't obvious to me at first.

Suggestion

I recommend we update these docs to add:

Note: If your custom notification needs to respond to click events, you will need to add the `pointer-events: auto` css property to your custom toast.

Thanks 👍