Align the workflow visualizer's nodes on the left (#9776)

**This PR implements a new layout for the visualizer, but the dimensions
of the nodes will change soon. I used hard-coded dimensions, like
`40px`, but I'll update them when I work on fixing the nodes' design. I
think we can merge this PR first and then fix the nodes' design.**



https://github.com/user-attachments/assets/580fa812-ee8e-4452-b6ac-ca55ecb31759

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx

@@ -76,9 +76,11 @@ const StyledSourceHandle = styled(Handle)`
   border: none;
   width: 4px;
   height: 4px;
+  left: ${({ theme }) => theme.spacing(10)};
 `;
 
 export const StyledTargetHandle = styled(Handle)`
+  left: ${({ theme }) => theme.spacing(10)};
   visibility: hidden;
 `;
 

packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx

@@ -3,10 +3,13 @@ import { Handle, Position } from '@xyflow/react';
 import { IconButton, IconPlus } from 'twenty-ui';
 
 const StyledContainer = styled.div`
+  padding-left: ${({ theme }) => theme.spacing(6)};
   padding-top: ${({ theme }) => theme.spacing(1)};
+  position: relative;
 `;
 
 export const StyledTargetHandle = styled(Handle)`
+  left: ${({ theme }) => theme.spacing(10)};
   visibility: hidden;
 `;
 

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/getOrganizedDiagram.ts

@@ -7,11 +7,15 @@ export const getOrganizedDiagram = (
   const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   graph.setGraph({ rankdir: 'TB' });
 
+  const biggestNodeWidth = diagram.nodes.reduce(
+    (acc, node) => Math.max(acc, node.measured?.width ?? 0),
+    0,
+  );
+
   diagram.edges.forEach((edge) => graph.setEdge(edge.source, edge.target));
   diagram.nodes.forEach((node) =>
     graph.setNode(node.id, {
-      ...node,
-      width: node.measured?.width ?? 0,
+      width: biggestNodeWidth,
       height: node.measured?.height ?? 0,
     }),
   );
@@ -21,10 +25,11 @@ export const getOrganizedDiagram = (
   return {
     nodes: diagram.nodes.map((node) => {
       const position = graph.node(node.id);
+
       // We are shifting the dagre node position (anchor=center center) to the top left
       // so it matches the React Flow node anchor point (top left).
-      const x = position.x - (node.measured?.width ?? 0) / 2;
-      const y = position.y - (node.measured?.height ?? 0) / 2;
+      const x = position.x - position.width / 2;
+      const y = position.y - position.height / 2;
 
       return { ...node, position: { x, y } };
     }),