From 1cbada87f4765375b172f57c3878e38159806ba8 Mon Sep 17 00:00:00 2001 From: sepehr Date: Mon, 12 Jan 2026 23:20:27 +0100 Subject: [PATCH] fix: prevent toasts from blocking UI interaction 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 --- keep-notes/app/globals.css | 13 +++++++++++++ keep-notes/components/ui/toast.tsx | 1 + 2 files changed, 14 insertions(+) diff --git a/keep-notes/app/globals.css b/keep-notes/app/globals.css index 15e07e6..8627515 100644 --- a/keep-notes/app/globals.css +++ b/keep-notes/app/globals.css @@ -204,3 +204,16 @@ font-family: 'Vazirmatn', sans-serif !important; } } + +/* ============================================ + Toast Notifications - Fix UI Blocking Issue + ============================================ */ +/* Ensure the toaster container doesn't block clicks on the page underneath */ +[data-sonner-toaster] { + pointer-events: none !important; +} + +/* But allow interaction with the toast itself (buttons, close, etc) */ +[data-sonner-toast] { + pointer-events: auto !important; +} diff --git a/keep-notes/components/ui/toast.tsx b/keep-notes/components/ui/toast.tsx index 203667d..f959284 100644 --- a/keep-notes/components/ui/toast.tsx +++ b/keep-notes/components/ui/toast.tsx @@ -14,6 +14,7 @@ export function Toaster() { richColors closeButton duration={3000} + className="toaster" toastOptions={{ classNames: { toast: 'toast pointer-events-auto',