fix(mobile): preserve note search and canvas connections

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/search-replace/workflow-search-replace.tsx

@@ -323,9 +323,9 @@ function WorkflowSearchReplacePanel({ focusRef }: WorkflowSearchReplacePanelProp
       if (!isFloatingLayout()) {
         useChatStore.getState().setIsChatOpen(false)
         useVariablesModalStore.getState().setIsOpen(false)
+        usePanelStore.getState().setIsMobilePanelOpen(match.blockType !== 'note')
       }
       usePanelEditorStore.getState().setCurrentBlockId(match.blockId)
-      usePanelStore.getState().setIsMobilePanelOpen(true)
       usePanelEditorSearchStore.getState().setActiveSearchTarget({
         ...createActiveSearchTarget(match, query),
       })

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

@@ -4376,6 +4376,33 @@ const WorkflowContent = React.memo(
 
           const position = getAbsolutePosition(mountedNode)
           const { width: nodeWidth, height: nodeHeight } = getFocusDimensions(mountedNode)
+          if (isMobile && mountedNode.type === 'noteBlock') {
+            const isExpanded = Boolean(
+              canvasContainerRef.current?.querySelector(
+                `[data-id="${CSS.escape(mountedNode.id)}"] [data-note-expanded]`
+              )
+            )
+            const width = isExpanded ? BLOCK_DIMENSIONS.NOTE_EXPANDED_WIDTH : nodeWidth
+            const height = isExpanded ? BLOCK_DIMENSIONS.NOTE_EXPANDED_HEIGHT : nodeHeight
+            fitViewToBounds({
+              nodes: [
+                {
+                  ...mountedNode,
+                  position: {
+                    x: position.x + (nodeWidth - width) / 2,
+                    y: position.y + (nodeHeight - height) / 2,
+                  },
+                  measured: { width, height },
+                },
+              ],
+              padding: SUBFLOW_FOCUS_PADDING,
+              maxZoom: 1,
+              minZoom: 0.1,
+              duration: durationMs,
+            })
+            onFocusStart?.()
+            return
+          }
           const currentZoom = reactFlowInstance.getViewport().zoom
           const targetZoom = Math.max(currentZoom, 1)
           reactFlowInstance.setCenter(position.x + nodeWidth / 2, position.y + nodeHeight / 2, {
@@ -4425,7 +4452,7 @@ const WorkflowContent = React.memo(
 
         waitForSettledCanvas()
       },
-      [fitViewToBounds, getNodeAbsolutePosition, getNodes, reactFlowInstance]
+      [fitViewToBounds, getNodeAbsolutePosition, getNodes, isMobile, reactFlowInstance]
     )
 
     /**
@@ -4785,7 +4812,7 @@ const WorkflowContent = React.memo(
      */
     const nodesForRender = useMemo(() => {
       const elevatedNodes = sortNodesParentsFirst(displayNodes).map((node) => {
-        const renderedNode = isMobile ? { ...node, draggable: false, connectable: false } : node
+        const renderedNode = isMobile ? { ...node, draggable: false } : node
         if (node.type === 'subflowNode') return renderedNode
         const target = getBlockZIndex(node.zIndex ?? BLOCK_Z_BASE, {
           isSelected: node.selected,
@@ -5168,7 +5195,7 @@ const WorkflowContent = React.memo(
                     panOnDrag={embedded || isMobile ? true : selectionProps.panOnDrag}
                     selectionKeyCode={embedded ? null : selectionProps.selectionKeyCode}
                     multiSelectionKeyCode={embedded ? null : ['Meta', 'Control', 'Shift']}
-                    nodesConnectable={!embedded && !isMobile && effectivePermissions.canEdit}
+                    nodesConnectable={!embedded && effectivePermissions.canEdit}
                     connectOnClick={false}
                     nodesDraggable={!embedded && !isMobile && effectivePermissions.canEdit}
                     draggable={false}

packages/workflow-renderer/src/subflow/subflow-node-view.tsx

@@ -111,11 +111,11 @@ const getCursorHandleSize = (side: WorkflowBorderCursorHandle['edgeSide']) =>
 /** Invisible React Flow handles aligned with the painted connection knobs. */
 const getHandleClasses = (position: 'left' | 'right') => {
   const baseClasses =
-    'z-20! h-[38px]! w-[14px]! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
+    "z-20! h-[38px]! w-[14px]! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0! pointer-coarse:before:absolute pointer-coarse:before:inset-y-0 pointer-coarse:before:content-['']"
 
   const positionClasses = {
-    left: 'left-[-7px]!',
-    right: 'right-[-7px]!',
+    left: 'left-[-7px]! pointer-coarse:before:right-0 pointer-coarse:before:left-[-30px]',
+    right: 'right-[-7px]! pointer-coarse:before:right-[-30px] pointer-coarse:before:left-0',
   }
 
   return cn(baseClasses, positionClasses[position])

packages/workflow-renderer/src/workflow-block/workflow-block-view.tsx

@@ -133,13 +133,15 @@ const clampTabLength = (length: number) =>
  */
 const getInvisibleHandleClasses = (side: 'left' | 'right' | 'top' | 'bottom') => {
   const offsetClasses = {
-    right: 'right-[-7px]!',
-    left: 'left-[-7px]!',
-    top: 'top-[-7px]!',
-    bottom: 'bottom-[-7px]!',
+    right:
+      'right-[-7px]! pointer-coarse:before:inset-y-0 pointer-coarse:before:right-[-30px] pointer-coarse:before:left-0',
+    left: 'left-[-7px]! pointer-coarse:before:inset-y-0 pointer-coarse:before:right-0 pointer-coarse:before:left-[-30px]',
+    top: 'top-[-7px]! pointer-coarse:before:inset-x-0 pointer-coarse:before:top-[-30px] pointer-coarse:before:bottom-0',
+    bottom:
+      'bottom-[-7px]! pointer-coarse:before:inset-x-0 pointer-coarse:before:top-0 pointer-coarse:before:bottom-[-30px]',
   } as const
   return cn(
-    'z-20! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!',
+    "z-20! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0! pointer-coarse:before:absolute pointer-coarse:before:content-['']",
     offsetClasses[side]
   )
 }
@@ -1075,7 +1077,7 @@ export function WorkflowBlockView({
             type='source'
             position={ERROR_SOURCE_HANDLE_POSITION}
             id='error'
-            className='z-20! cursor-crosshair! rounded-none! border-none! bg-transparent! opacity-0!'
+            className={getInvisibleHandleClasses('bottom')}
             style={getErrorSourceHandleStyle()}
             data-nodeid={id}
             data-handleid='error'