From 23400e9679389ba73fc4d3c66bd42e15e63bb213 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Thu, 23 Jan 2025 18:26:51 +0100
Subject: [PATCH] Normalize the spacing between nodes (#9820)

## Old

![CleanShot 2025-01-23 at 16 38
25@2x](https://github.com/user-attachments/assets/0c8e3b26-5ef4-455a-978e-b430e54b63ba)

![CleanShot 2025-01-23 at 16 38
51@2x](https://github.com/user-attachments/assets/929b73d3-2d7f-45b9-a0fb-62516969bd63)

## New

![CleanShot 2025-01-23 at 17 12
25@2x](https://github.com/user-attachments/assets/670ba386-c643-408d-a682-d279bc81f5c1)
---
 .../components/WorkflowDiagramBaseStepNode.tsx              | 3 +--
 .../components/WorkflowDiagramCanvasBase.tsx                | 6 ++++++
 .../components/WorkflowDiagramCreateStepNode.tsx            | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
index 920d75a7e..51bb310b6 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramBaseStepNode.tsx
@@ -16,8 +16,7 @@ const StyledStepNodeContainer = styled.div`
   display: flex;
   flex-direction: column;
 
-  padding-bottom: 12px;
-  padding-top: 6px;
+  padding-block: ${({ theme }) => theme.spacing(3)};
 `;
 
 const StyledStepNodeType = styled.div`
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
index 838b537bc..6007f2268 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCanvasBase.tsx
@@ -51,6 +51,12 @@ const StyledResetReactflowStyles = styled.div`
     min-height: 0;
     min-width: 0;
   }
+  .react-flow__handle-top {
+    transform: translate(-50%, -50%);
+  }
+  .react-flow__handle-bottom {
+    transform: translate(-50%, 100%);
+  }
   .react-flow__handle.connectionindicator {
     cursor: pointer;
   }
diff --git a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
index 1b6b84365..170d1dfd4 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-diagram/components/WorkflowDiagramCreateStepNode.tsx
@@ -7,7 +7,7 @@ import { Position } from '@xyflow/react';
 import { IconButton, IconPlus } from 'twenty-ui';
 
 const StyledContainer = styled.div`
-  padding-top: ${({ theme }) => theme.spacing(1)};
+  padding-top: ${({ theme }) => theme.spacing(3)};
   transform: translateX(-50%);
   position: relative;
   left: ${NODE_ICON_WIDTH + NODE_ICON_LEFT_MARGIN + NODE_BORDER_WIDTH}px;