rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Stop empty toast viewport from eating pointer events

Browse Source 
The toast viewport stays mounted even with no toasts, as a fixed box in
the bottom-right corner. With default pointer-events it swallowed hover
and clicks over content beneath it, such as the lower edge of a bottom
action bar's right-aligned buttons.

Mark the viewport pointer-events-none and re-enable events on each toast
root so only actual toast cards are interactive.

Signed-off-by: Émile Ré <emile@probo.com>
This commit is contained in:
Émile Ré
2026-07-27 15:09:22 +02:00
parent d2638a3d78
commit ca5c622a01
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/ui/src/v2/Toaster/variants.ts
View File

@@ -26,12 +26,15 @@ import { tv } from "tailwind-variants/lite";
// read as one family. Meaning is carried by the icon too, not color alone.
export const toaster = tv({
slots: {
// `pointer-events-none` so the always-mounted (even when empty) fixed
// viewport never intercepts hover/clicks over the content beneath it (e.g. a
// bottom action bar); individual toasts re-enable events on `root`.
viewport: [
"fixed bottom-0 right-0 z-6 flex w-[380px] max-w-[calc(100vw-2rem)] flex-col gap-2 p-4",
"pointer-events-none fixed bottom-0 right-0 z-6 flex w-95 max-w-[calc(100vw-2rem)] flex-col gap-2 p-4",
"outline-none",
],
root: [
"flex items-start gap-3 rounded-4 border p-4 shadow-4",
"pointer-events-auto flex items-start gap-3 rounded-4 border p-4 shadow-4",
"transition-all duration-150",
"data-starting-style:translate-y-2 data-starting-style:opacity-0",
"data-ending-style:translate-y-2 data-ending-style:opacity-0",