fix(formatting): fixed widths & heights for auto-formatting

Author: waleedlatif1

apps/sim/app/w/[id]/components/workflow-edge/workflow-edge.tsx

@@ -12,6 +12,8 @@ export const WorkflowEdge = ({
   data,
   style,
 }: EdgeProps) => {
+  const isHorizontal = sourcePosition === 'right' || sourcePosition === 'left'
+
   const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
@@ -20,7 +22,7 @@ export const WorkflowEdge = ({
     targetY,
     targetPosition,
     borderRadius: 8,
-    offset: 10,
+    offset: isHorizontal ? 30 : 20,
   })
 
   // Use the directly provided isSelected flag instead of computing it

apps/sim/app/w/[id]/utils.ts

@@ -721,13 +721,13 @@ export const calculateAutoLayout = (
 
         const baseSpacing = horizontalSpacing
         const widthAdjustment = Math.max(maxCurrentWidth, maxNextWidth) - 350 // 350 is standard width
-        const connectionTagSpace = 50 // Reduced from 100 - Extra space for connection tags
+        const connectionTagSpace = 100
 
         const isOrphanedLayer =
           currentLayer > maxLayer - 2 &&
           (currentLayerGroups.some((group) => group.some((nodeId) => orphanedBlocks.has(nodeId))) ||
             nextLayerGroups.some((group) => group.some((nodeId) => orphanedBlocks.has(nodeId))))
-        const orphanedSpacing = isOrphanedLayer ? 100 : 0
+        const orphanedSpacing = isOrphanedLayer ? 200 : 0
 
         return baseSpacing + widthAdjustment + connectionTagSpace + orphanedSpacing
       }
@@ -837,13 +837,13 @@ export const calculateAutoLayout = (
 
         const baseSpacing = verticalSpacing
         const heightAdjustment = Math.max(maxCurrentHeight, maxNextHeight) - 150 // 150 is standard height
-        const connectionTagSpace = 25
+        const connectionTagSpace = 50
 
         const isOrphanedLayer =
           currentLayer > maxLayer - 2 &&
           (currentLayerGroups.some((group) => group.some((nodeId) => orphanedBlocks.has(nodeId))) ||
             nextLayerGroups.some((group) => group.some((nodeId) => orphanedBlocks.has(nodeId))))
-        const orphanedSpacing = isOrphanedLayer ? 75 : 0
+        const orphanedSpacing = isOrphanedLayer ? 150 : 0
 
         return baseSpacing + heightAdjustment + connectionTagSpace + orphanedSpacing
       }

apps/sim/app/w/[id]/workflow.tsx

@@ -159,13 +159,13 @@ function WorkflowContent() {
         ? {
             // Vertical handles: optimize for top-to-bottom flow
             horizontalSpacing: 400,
-            verticalSpacing: 150,
+            verticalSpacing: 300,
             startX: 200,
             startY: 200,
           }
         : {
             // Horizontal handles: optimize for left-to-right flow
-            horizontalSpacing: 300,
+            horizontalSpacing: 600,
             verticalSpacing: 200,
             startX: 150,
             startY: 300,