From 6c80532847d4097344ae05957e40300082f7a927 Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 3 Apr 2026 19:03:35 -0700 Subject: [PATCH 1/2] fix(modals): center modals in visible content area accounting for sidebar and panel --- apps/sim/app/_styles/globals.css | 2 +- apps/sim/app/layout.tsx | 7 ++++++- .../sidebar/components/search-modal/search-modal.tsx | 6 +++++- apps/sim/components/emcn/components/modal/modal.tsx | 9 +++++++-- 4 files changed, 19 insertions(+), 5 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 0c80aef072a..62913f3040b 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -10,7 +10,7 @@ * @see stores/constants.ts for the source of truth */ :root { - --sidebar-width: 248px; /* SIDEBAR_WIDTH.DEFAULT */ + --sidebar-width: 0px; /* 0 outside workspace; blocking script sets actual value on workspace pages */ --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */ --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */ --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */ diff --git a/apps/sim/app/layout.tsx b/apps/sim/app/layout.tsx index 05fd18a7c0b..5863c4405d3 100644 --- a/apps/sim/app/layout.tsx +++ b/apps/sim/app/layout.tsx @@ -90,6 +90,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) } // Sidebar width + var defaultSidebarWidth = '248px'; try { var stored = localStorage.getItem('sidebar-state'); if (stored) { @@ -108,11 +109,15 @@ export default function RootLayout({ children }: { children: React.ReactNode }) document.documentElement.style.setProperty('--sidebar-width', width + 'px'); } else if (width > maxSidebarWidth) { document.documentElement.style.setProperty('--sidebar-width', maxSidebarWidth + 'px'); + } else { + document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth); } } + } else { + document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth); } } catch (e) { - // Fallback handled by CSS defaults + document.documentElement.style.setProperty('--sidebar-width', defaultSidebarWidth); } // Panel width and active tab diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx index 23c34bfdea4..51a9533e79d 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx @@ -343,7 +343,11 @@ export function SearchModal({ '-translate-x-1/2 fixed top-[15%] z-50 w-[500px] rounded-xl border-[4px] border-black/[0.06] bg-[var(--bg)] shadow-[0_24px_80px_-16px_rgba(0,0,0,0.15)] dark:border-white/[0.06] dark:shadow-[0_24px_80px_-16px_rgba(0,0,0,0.4)]', open ? 'visible opacity-100' : 'invisible opacity-0' )} - style={{ left: 'calc(var(--sidebar-width) / 2 + 50%)' }} + style={{ + left: isOnWorkflowPage + ? 'calc(50% + (var(--sidebar-width) - var(--panel-width)) / 2)' + : 'calc(var(--sidebar-width) / 2 + 50%)', + }} >
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx index 2932bb2d5c9..60ba90ed96e 100644 --- a/apps/sim/components/emcn/components/modal/modal.tsx +++ b/apps/sim/components/emcn/components/modal/modal.tsx @@ -40,6 +40,7 @@ import * as React from 'react' import * as DialogPrimitive from '@radix-ui/react-dialog' import * as TabsPrimitive from '@radix-ui/react-tabs' import { X } from 'lucide-react' +import { usePathname } from 'next/navigation' import { cn } from '@/lib/core/utils/cn' import { Button } from '../button/button' @@ -55,7 +56,7 @@ const ANIMATION_CLASSES = * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects. */ const CONTENT_ANIMATION_CLASSES = - 'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none' + 'data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none' /** * Root modal component. Manages open state. @@ -145,6 +146,8 @@ const ModalContent = React.forwardRef< ModalContentProps >(({ className, children, showClose = true, size = 'md', style, ...props }, ref) => { const [isInteractionReady, setIsInteractionReady] = React.useState(false) + const pathname = usePathname() + const isWorkflowPage = pathname?.includes('/w/') ?? false React.useEffect(() => { const timer = setTimeout(() => setIsInteractionReady(true), 100) @@ -164,7 +167,9 @@ const ModalContent = React.forwardRef< className )} style={{ - left: '50%', + left: isWorkflowPage + ? 'calc(50% + (var(--sidebar-width) - var(--panel-width)) / 2)' + : 'calc(var(--sidebar-width) / 2 + 50%)', ...style, }} onEscapeKeyDown={(e) => { From bb1745a666e2a42e4110e0c4e199238649ac648c Mon Sep 17 00:00:00 2001 From: waleed Date: Fri, 3 Apr 2026 19:09:25 -0700 Subject: [PATCH 2/2] =?UTF-8?q?fix(modals):=20address=20pr=20feedback=20?= =?UTF-8?q?=E2=80=94=20comment=20clarity=20and=20document=20panel=20assump?= =?UTF-8?q?tion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/sim/app/_styles/globals.css | 2 +- apps/sim/components/emcn/components/modal/modal.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css index 62913f3040b..254534f2891 100644 --- a/apps/sim/app/_styles/globals.css +++ b/apps/sim/app/_styles/globals.css @@ -10,7 +10,7 @@ * @see stores/constants.ts for the source of truth */ :root { - --sidebar-width: 0px; /* 0 outside workspace; blocking script sets actual value on workspace pages */ + --sidebar-width: 0px; /* 0 outside workspace; blocking script always sets actual value on workspace pages */ --panel-width: 320px; /* PANEL_WIDTH.DEFAULT */ --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */ --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */ diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx index 60ba90ed96e..3995947dba1 100644 --- a/apps/sim/components/emcn/components/modal/modal.tsx +++ b/apps/sim/components/emcn/components/modal/modal.tsx @@ -168,7 +168,8 @@ const ModalContent = React.forwardRef< )} style={{ left: isWorkflowPage - ? 'calc(50% + (var(--sidebar-width) - var(--panel-width)) / 2)' + ? // --panel-width is always the rendered panel width on /w/ routes (panel is never hidden/collapsed) + 'calc(50% + (var(--sidebar-width) - var(--panel-width)) / 2)' : 'calc(var(--sidebar-width) / 2 + 50%)', ...style, }}