From ca5c622a01229da62c1ec300797443a08786c897 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= Date: Mon, 27 Jul 2026 15:09:22 +0200 Subject: [PATCH] Stop empty toast viewport from eating pointer events MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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é --- packages/ui/src/v2/Toaster/variants.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/v2/Toaster/variants.ts b/packages/ui/src/v2/Toaster/variants.ts index 4bad5229b..1be05c48f 100644 --- a/packages/ui/src/v2/Toaster/variants.ts +++ b/packages/ui/src/v2/Toaster/variants.ts @@ -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",