fix(embedded): block layout should not be dependent on viewport

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

@@ -208,7 +208,8 @@ const reactFlowStyles = [
  '[&_.react-flow__node-subflowNode.selected]:!shadow-none',
 ].join(' ')
 const reactFlowFitViewOptions = { padding: 0.6, maxZoom: 1.0 } as const
-const embeddedFitViewOptions = { padding: 0.15, maxZoom: 0.85, minZoom: 0.35 } as const
+const embeddedFitViewOptions = { padding: 0.15, maxZoom: 0.85, minZoom: 0.1 } as const
+const embeddedResizeFitViewOptions = { ...embeddedFitViewOptions, duration: 0 } as const
 const reactFlowProOptions = { hideAttribution: true } as const
 
 /**
@@ -244,7 +245,10 @@ const WorkflowContent = React.memo(
  const [potentialParentId, setPotentialParentId] = useState<string | null>(null)
  const [selectedEdges, setSelectedEdges] = useState<SelectedEdgesMap>(new Map())
  const [isErrorConnectionDrag, setIsErrorConnectionDrag] = useState(false)
+ const canvasContainerRef = useRef<HTMLDivElement>(null)
  const selectedIdsRef = useRef<string[] | null>(null)
+ const embeddedFitFrameRef = useRef<number | null>(null)
+ const hasCompletedInitialEmbeddedFitRef = useRef(false)
  const canvasMode = useCanvasModeStore((state) => state.mode)
  const isHandMode = embedded ? true : canvasMode === 'hand'
  const { handleCanvasMouseDown, selectionProps } = useShiftSelectionLock({ isHandMode })
@@ -373,6 +377,34 @@ const WorkflowContent = React.memo(
  ]
  )
 
+ const scheduleEmbeddedFit = useCallback(() => {
+ if (!embedded || !isWorkflowReady) return
+
+ if (embeddedFitFrameRef.current !== null) {
+ cancelAnimationFrame(embeddedFitFrameRef.current)
+ }
+
+ embeddedFitFrameRef.current = requestAnimationFrame(() => {
+ embeddedFitFrameRef.current = null
+
+ const container = canvasContainerRef.current
+ if (!container) return
+
+ const rect = container.getBoundingClientRect()
+ if (rect.width <= 0 || rect.height <= 0) return
+
+ const nodes = reactFlowInstance.getNodes()
+ if (nodes.length > 0) {
+ void reactFlowInstance.fitView(embeddedResizeFitViewOptions)
+ }
+
+ if (!hasCompletedInitialEmbeddedFitRef.current) {
+ hasCompletedInitialEmbeddedFitRef.current = true
+ setIsCanvasReady(true)
+ }
+ })
+ }, [embedded, isWorkflowReady, reactFlowInstance])
+
  const {
  getNodeDepth,
  getNodeAbsolutePosition,
@@ -3750,10 +3782,46 @@ const WorkflowContent = React.memo(
  activeWorkflowId,
  ])
 
+ useEffect(() => {
+ if (!embedded || !isWorkflowReady) {
+ return
+ }
+
+ const container = canvasContainerRef.current
+ if (!container) {
+ return
+ }
+
+ scheduleEmbeddedFit()
+
+ const resizeObserver = new ResizeObserver(() => {
+ scheduleEmbeddedFit()
+ })
+
+ resizeObserver.observe(container)
+
+ return () => {
+ resizeObserver.disconnect()
+
+ if (embeddedFitFrameRef.current !== null) {
+ cancelAnimationFrame(embeddedFitFrameRef.current)
+ embeddedFitFrameRef.current = null
+ }
+ }
+ }, [embedded, isWorkflowReady, scheduleEmbeddedFit])
+
+ useEffect(() => {
+ if (!embedded || !isWorkflowReady) {
+ return
+ }
+
+ scheduleEmbeddedFit()
+ }, [blocksStructureHash, embedded, isWorkflowReady, scheduleEmbeddedFit])
+
  return (
  <div className='flex h-full w-full overflow-hidden'>
  <div className='flex min-w-0 flex-1 flex-col'>
- <div className='relative flex-1 overflow-hidden'>
+ <div ref={canvasContainerRef} className='relative flex-1 overflow-hidden'>
  {!isWorkflowReady && (
  <div className='absolute inset-0 z-[5] flex items-center justify-center bg-[var(--bg)]'>
  <div
@@ -3791,8 +3859,12 @@ const WorkflowContent = React.memo(
  onDrop={effectivePermissions.canEdit ? onDrop : undefined}
  onDragOver={effectivePermissions.canEdit ? onDragOver : undefined}
  onInit={(instance) => {
+ if (embedded) {
+ return
+ }
+
  requestAnimationFrame(() => {
- instance.fitView(embedded ? embeddedFitViewOptions : reactFlowFitViewOptions)
+ instance.fitView(reactFlowFitViewOptions)
  setIsCanvasReady(true)
  })
  }}