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.

Author: waleedlatif1

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