Positioning wrapper div gets no pointer events

[Kilian]

I need toasts to have a specific offset from their position, and can do that with a custom style that sets the translate CSS property. However because the wrapper div gets pointer events and sits at the original position, it "eats" pointer events.

This PR removes pointer events from the wrapper and then reinstates them on the div itself, so no functionality is lost.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/timo/react-hot-toast/19lsxin01
✅ Preview: https://react-hot-toast-git-fork-kilian-patch-2.timo1.vercel.app

[timolins]

Thanks! Not sure why pointer-events was only applied for the center position. That makes me think if it is needed in general. I'll do some testing.

About the positioning, the easiest way to increase the offset is to apply a margin, no need to transform. :)
I think we should mention that in the docs somewhere, since this is a not-so-rare use-case, and the solution isn't quite obvious.

[Kilian]

I like using the individual transform property translate since it's less likely to interfere with other properties like margin (not so much an issue when every toast has fixed position, but can be unpredictable with other configurations), and it plays nice with the "transform" you use as well.