From 371a4b3fcc714464bb528779ea6110f993335fa2 Mon Sep 17 00:00:00 2001 From: Riyadh Date: Sun, 10 May 2026 15:29:14 +0000 Subject: [PATCH] alert: keep meeting reminder buttons clickable while a Dialog is open MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Task #478. When the upcoming-meeting reminder ("الاجتماع التالي") appeared on top of an open note thread dialog, the user could not tap "تأجيل" / "تم" / × / "تفاصيل". The buttons looked enabled and the popup sat above the dialog overlay (`z-[60]` over `z-50`), but nothing happened on click. Root cause: Radix `Dialog` is modal by default and its scroll-lock helper (`react-remove-scroll`) sets `pointer-events: none` on the document body while open. The meeting alert is portaled to body and inherited that, silently swallowing all clicks. Fix: in `artifacts/tx-os/src/components/executive-meetings/upcoming- meeting-alert.tsx`, add `pointer-events-auto` to the floating panel's className so it explicitly opts back in to receiving pointer events. Buttons inside inherit auto from the panel. Inline comment added referencing #478 and the Radix scroll-lock behavior. No change to the shared `Dialog` primitive, no other tokens or components touched. Existing `#282` behavior (hide alert while its own postpone modal is open) is preserved. Verified: - `tsc --noEmit` clean. - `notes-thread-dialog.spec.mjs` passes (no regression in the scenario that surfaced the bug). --- .../executive-meetings/upcoming-meeting-alert.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx b/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx index 5fd8e005..6cb36e5c 100644 --- a/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx +++ b/artifacts/tx-os/src/components/executive-meetings/upcoming-meeting-alert.tsx @@ -533,7 +533,16 @@ export function UpcomingMeetingAlert() { // other dialogs/toasts are unaffected. The panel reappears // automatically when the modal closes (if the alert is still // valid for the current time window). - className={`fixed z-[60] w-[min(380px,calc(100vw-32px))] rounded-lg shadow-xl ${ + // #478: `pointer-events-auto` keeps the alert's buttons clickable + // even while a Radix `Dialog` is open elsewhere in the app (e.g. + // the notes thread dialog). Radix dialogs ship with + // `react-remove-scroll`, which sets `pointer-events: none` on + // the document body — anything portaled outside the dialog + // (including this fixed alert at `z-[60]`) inherits that and + // silently swallows clicks. Forcing pointer-events back to auto + // here lets the user act on the reminder without having to + // close the unrelated dialog first. + className={`pointer-events-auto fixed z-[60] w-[min(380px,calc(100vw-32px))] rounded-lg shadow-xl ${ postponeOpen ? "hidden" : "" } ${enterAnim ? "scale-100 opacity-100" : "scale-95 opacity-0"}`} aria-hidden={postponeOpen ? true : undefined}