From 52145edc97c735da4ecaa0b9fe3f3297530a00e1 Mon Sep 17 00:00:00 2001 From: waleed Date: Tue, 30 Jun 2026 20:21:09 -0700 Subject: [PATCH 1/4] 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 ae78693064f..39899a2ba6f 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<
Date: Tue, 30 Jun 2026 20:42:02 -0700 Subject: [PATCH 2/4] Revert "fix(emcn): promote modal overlay + content wrapper to own compositing layers" This reverts commit 52145edc97c735da4ecaa0b9fe3f3297530a00e1. --- packages/emcn/src/components/modal/modal.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/emcn/src/components/modal/modal.tsx b/packages/emcn/src/components/modal/modal.tsx index 39899a2ba6f..ae78693064f 100644 --- a/packages/emcn/src/components/modal/modal.tsx +++ b/packages/emcn/src/components/modal/modal.tsx @@ -122,14 +122,6 @@ 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, @@ -139,7 +131,7 @@ const ModalOverlay = React.forwardRef<
Date: Tue, 30 Jun 2026 20:42:28 -0700 Subject: [PATCH 3/4] fix(ui): import calendar icon not calendar widget from emcn --- .../scheduled-tasks/components/task-modal/task-modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-modal/task-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-modal/task-modal.tsx index 4862bcc0739..de88be597bf 100644 --- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-modal/task-modal.tsx +++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-modal/task-modal.tsx @@ -2,7 +2,6 @@ import { useEffect, useRef, useState } from 'react' import { - Calendar, ChipDatePicker, ChipModal, ChipModalFooter, @@ -11,6 +10,7 @@ import { ChipModalPromptBody, ChipTimePicker, } from '@sim/emcn' +import { Calendar } from '@sim/emcn/icons' import { format } from 'date-fns' import { useParams } from 'next/navigation' import { wallClockNow, zonedWallClockToUtc } from '@/lib/core/utils/timezone' From 292891c90abd0f0aefb497116a767ebdce6a738c Mon Sep 17 00:00:00 2001 From: Theodore Li Date: Tue, 30 Jun 2026 20:45:10 -0700 Subject: [PATCH 4/4] fix(ui): fix calendar icon emcn mismatch --- .../components/task-delete-dialog/task-delete-dialog.tsx | 2 +- .../components/task-details-modal/task-details-modal.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-delete-dialog/task-delete-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-delete-dialog/task-delete-dialog.tsx index d4dcbc3f2d3..4927774a4f9 100644 --- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-delete-dialog/task-delete-dialog.tsx +++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-delete-dialog/task-delete-dialog.tsx @@ -1,13 +1,13 @@ 'use client' import { - Calendar, ChipConfirmModal, ChipModal, ChipModalBody, ChipModalFooter, ChipModalHeader, } from '@sim/emcn' +import { Calendar } from '@sim/emcn/icons' import type { ScheduledTask } from '@/app/workspace/[workspaceId]/scheduled-tasks/utils/schedule-events' interface TaskDeleteDialogProps { diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-details-modal/task-details-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-details-modal/task-details-modal.tsx index 7c2f0103be8..2666b89186e 100644 --- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-details-modal/task-details-modal.tsx +++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/task-details-modal/task-details-modal.tsx @@ -1,6 +1,5 @@ 'use client' import { - Calendar, ChipModal, ChipModalBody, ChipModalField, @@ -9,6 +8,7 @@ import { chipFieldSurfaceClass, cn, } from '@sim/emcn' +import { Calendar } from '@sim/emcn/icons' import { format } from 'date-fns' import { useParams } from 'next/navigation' import {