From eb39a87263efed37f45d6f74c3770a94af62724c Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Thu, 11 Jun 2026 16:55:18 -0700
Subject: [PATCH] fix(modal): center full-size modals against the viewport
 instead of the content area

---
 .../components/emcn/components/modal/modal.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index 5ec679c3d5d..e709b19f020 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -129,6 +129,10 @@ export interface ModalContentProps
    * - lg: max 600px (content-heavy modals)
    * - xl: max 800px (complex editors)
    * - full: max 1200px (dashboards, large content)
+   *
+   * Sizes up to `xl` center within the content area (offset for the sidebar,
+   * and the panel on workflow pages). `full` modals span most of the viewport,
+   * so they center against the full viewport instead.
    * @default 'md'
    */
   size?: ModalSize
@@ -184,11 +188,15 @@ const ModalContent = React.forwardRef<
         <ModalOverlay />
         <div
           className='pointer-events-none fixed inset-0 z-[var(--z-modal)] flex items-center justify-center'
-          style={{
-            paddingLeft: isWorkflowPage
-              ? 'calc(var(--sidebar-width) - var(--panel-width))'
-              : 'var(--sidebar-width)',
-          }}
+          style={
+            size === 'full'
+              ? undefined
+              : {
+                  paddingLeft: isWorkflowPage
+                    ? 'calc(var(--sidebar-width) - var(--panel-width))'
+                    : 'var(--sidebar-width)',
+                }
+          }
         >
           <DialogPrimitive.Content
             ref={ref}