From 52145edc97c735da4ecaa0b9fe3f3297530a00e1 Mon Sep 17 00:00:00 2001 From: waleed Date: Tue, 30 Jun 2026 20:21:09 -0700 Subject: [PATCH] fix(emcn): promote modal overlay + content wrapper to own compositing layers The backdrop-blur overlay did not reliably paint above page content the browser had GPU-promoted (position: sticky headers and z-indexed absolutes inside a scroll container, e.g. the scheduled-tasks calendar), so those composited layers bled through the overlay despite its higher z-index. Force the overlay and the content wrapper onto their own compositing layers via translateZ(0) so the compositor honors stacking order. Inherent since the calendar shipped (#4979), not a refactor regression. --- packages/emcn/src/components/modal/modal.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx index ae78693064..39899a2ba6 100644 --- a/packages/emcn/src/components/modal/modal.tsx +++ b/packages/emcn/src/components/modal/modal.tsx @@ -122,6 +122,14 @@ const ModalClose = DialogPrimitive.Close * Modal overlay component with fade transition. * Outside interactions are handled by the dialog content so nested poppers can * close without also dismissing the modal. + * + * `[transform:translateZ(0)]` forces the overlay onto its own compositing layer. + * A `backdrop-blur` overlay does not reliably paint above page content the + * browser has already GPU-promoted — `position: sticky` headers and `z-index`ed + * absolutes inside a scroll container (e.g. the scheduled-tasks calendar) can + * sort ABOVE it despite its higher `z-index`, bleeding through. Promoting the + * overlay (and the content wrapper below, so the panel occludes too) makes the + * compositor honor stacking order. */ const ModalOverlay = React.forwardRef< React.ElementRef, @@ -131,7 +139,7 @@ const ModalOverlay = React.forwardRef<