improvement(zoom-prevention): moved downstream

Author: emir-karabeg

apps/sim/app/_shell/zoom-prevention.tsx

@@ -11,7 +11,6 @@ import { HydrationErrorHandler } from '@/app/_shell/hydration-error-handler'
 import { QueryProvider } from '@/app/_shell/providers/query-provider'
 import { SessionProvider } from '@/app/_shell/providers/session-provider'
 import { ThemeProvider } from '@/app/_shell/providers/theme-provider'
-import { ZoomPrevention } from '@/app/_shell/zoom-prevention'
 import { season } from '@/app/_styles/fonts/season/season'
 
 export const viewport: Viewport = {
@@ -190,10 +189,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <ThemeProvider>
             <QueryProvider>
               <SessionProvider>
-                <BrandedLayout>
-                  <ZoomPrevention />
-                  {children}
-                </BrandedLayout>
+                <BrandedLayout>{children}</BrandedLayout>
               </SessionProvider>
             </QueryProvider>
           </ThemeProvider>

apps/sim/app/layout.tsx

@@ -37,7 +37,10 @@ import {
   OutputSelect,
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components'
 import { useChatFileUpload } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks'
-import { useScrollManagement } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
+import {
+  usePreventZoom,
+  useScrollManagement,
+} from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   useFloatBoundarySync,
   useFloatDrag,
@@ -233,6 +236,7 @@ export function Chat() {
   const inputRef = useRef<HTMLInputElement>(null)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null)
   const streamReaderRef = useRef<ReadableStreamDefaultReader<Uint8Array> | null>(null)
+  const preventZoomRef = usePreventZoom()
 
   // File upload hook
   const {
@@ -814,6 +818,7 @@ export function Chat() {
 
   return (
     <div
+      ref={preventZoomRef}
       className='fixed z-30 flex flex-col overflow-hidden rounded-[6px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
       style={{
         left: `${actualPosition.x}px`,

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx

@@ -8,6 +8,7 @@ import { Button } from '@/components/emcn'
 import { AgentIcon } from '@/components/icons'
 import { cn } from '@/lib/core/utils/cn'
 import { createLogger } from '@/lib/logs/console/logger'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useSearchModalStore } from '@/stores/search-modal/store'
 
 const logger = createLogger('WorkflowCommandList')
@@ -58,6 +59,7 @@ export function CommandList() {
   const params = useParams()
   const router = useRouter()
   const { open: openSearchModal } = useSearchModalStore()
+  const preventZoomRef = usePreventZoom()
 
   const workspaceId = params.workspaceId as string | undefined
 
@@ -171,6 +173,7 @@ export function CommandList() {
 
   return (
     <div
+      ref={preventZoomRef}
       className={cn(
         'pointer-events-none absolute inset-0 mb-[50px] flex items-center justify-center'
       )}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx

@@ -3,6 +3,7 @@
 import { memo, useMemo } from 'react'
 import { useViewport } from 'reactflow'
 import { useSession } from '@/lib/auth/auth-client'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { getUserColor } from '@/app/workspace/[workspaceId]/w/utils/get-user-color'
 import { useSocket } from '@/app/workspace/providers/socket-provider'
 
@@ -23,6 +24,7 @@ const CursorsComponent = () => {
   const viewport = useViewport()
   const session = useSession()
   const currentUserId = session.data?.user?.id
+  const preventZoomRef = usePreventZoom()
 
   const cursors = useMemo<CursorRenderData[]>(() => {
     return presenceUsers
@@ -41,7 +43,7 @@ const CursorsComponent = () => {
   }
 
   return (
-    <div className='pointer-events-none absolute inset-0 z-30 select-none'>
+    <div ref={preventZoomRef} className='pointer-events-none absolute inset-0 z-30 select-none'>
       {cursors.map(({ id, name, cursor, color }) => {
         const x = cursor.x * viewport.zoom + viewport.x
         const y = cursor.y * viewport.zoom + viewport.y

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx'
 import { Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { useCopilotStore } from '@/stores/panel/copilot/store'
 import { useTerminalStore } from '@/stores/terminal'
 import { useWorkflowDiffStore } from '@/stores/workflow-diff'
@@ -295,13 +296,16 @@ export const DiffControls = memo(function DiffControls() {
     })
   }, [updatePreviewToolCallState, rejectChanges])
 
+  const preventZoomRef = usePreventZoom()
+
   // Don't show anything if no diff is available or diff is not ready
   if (!hasActiveDiff || !isDiffReady) {
     return null
   }
 
   return (
     <div
+      ref={preventZoomRef}
       className={clsx(
         '-translate-x-1/2 fixed left-1/2 z-30',
         !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx

@@ -4,6 +4,7 @@ import { Component, type ReactNode, useEffect } from 'react'
 import { ReactFlowProvider } from 'reactflow'
 import { createLogger } from '@/lib/logs/console/logger'
 import { Panel } from '@/app/workspace/[workspaceId]/w/[workflowId]/components'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import { Sidebar } from '@/app/workspace/[workspaceId]/w/components/sidebar/sidebar'
 
 const logger = createLogger('ErrorBoundary')
@@ -24,12 +25,13 @@ export function ErrorUI({
   onReset,
   fullScreen = false,
 }: ErrorUIProps) {
+  const preventZoomRef = usePreventZoom()
   const containerClass = fullScreen
     ? 'flex flex-col w-full h-screen bg-[var(--surface-1)]'
     : 'flex flex-col w-full h-full bg-[var(--surface-1)]'
 
   return (
-    <div className={containerClass}>
+    <div ref={preventZoomRef} className={containerClass}>
       {/* Sidebar */}
       <Sidebar />
 

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx

@@ -4,7 +4,6 @@ export { DiffControls } from './diff-controls/diff-controls'
 export { ErrorBoundary } from './error/index'
 export { Notifications } from './notifications/notifications'
 export { Panel } from './panel/panel'
-export { SkeletonLoading } from './skeleton-loading/skeleton-loading'
 export { SubflowNodeComponent } from './subflows/subflow-node'
 export { Terminal } from './terminal/terminal'
 export { WandPromptBar } from './wand-prompt-bar/wand-prompt-bar'

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/index.ts

@@ -6,6 +6,7 @@ import { Button } from '@/components/emcn'
 import { createLogger } from '@/lib/logs/console/logger'
 import { useRegisterGlobalCommands } from '@/app/workspace/[workspaceId]/providers/global-commands-provider'
 import { createCommands } from '@/app/workspace/[workspaceId]/utils/commands-utils'
+import { usePreventZoom } from '@/app/workspace/[workspaceId]/w/[workflowId]/hooks'
 import {
   type NotificationAction,
   openCopilotWithMessage,
@@ -93,12 +94,15 @@ export const Notifications = memo(function Notifications() {
     ])
   )
 
+  const preventZoomRef = usePreventZoom()
+
   if (visibleNotifications.length === 0) {
     return null
   }
 
   return (
     <div
+      ref={preventZoomRef}
       className={clsx(
         'fixed right-[calc(var(--panel-width)+16px)] bottom-[calc(var(--terminal-height)+16px)] z-30 flex flex-col items-end',
         !isTerminalResizing && 'transition-[bottom] duration-100 ease-out'