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<typeof DialogPrimitive.Overlay>,
@@ -131,7 +139,7 @@ const ModalOverlay = React.forwardRef<
     <DialogPrimitive.Overlay
       ref={ref}
       className={cn(
-        'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px]',
+        'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px] [transform:translateZ(0)]',
         ANIMATION_CLASSES,
         className
       )}
@@ -229,7 +237,7 @@ const ModalContent = React.forwardRef<
       <ModalPortal>
         <ModalOverlay />
         <div
-          className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
+          className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center [transform:translateZ(0)]'
           style={
             size === 'full'
               ? undefined