From 7c60f2234a34e25d2dd0ab27c826dfdf8877388f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Nov 2023 09:35:37 +0100
Subject: [PATCH 1/2] refactor(system,styles): use translate to align handles
 to center of their side

---
 packages/system/src/styles/init.css | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/system/src/styles/init.css b/packages/system/src/styles/init.css
index b28540de..9fed0d7b 100644
--- a/packages/system/src/styles/init.css
+++ b/packages/system/src/styles/init.css
@@ -183,26 +183,26 @@
   &-bottom {
     top: auto;
     left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
+    bottom: 0;
+    transform: translate(-50%, 50%);
   }
 
   &-top {
+    top: 0;
     left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
+    transform: translate(-50%, -50%);
   }
 
   &-left {
     top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
+    left: 0;
+    transform: translate(-50%, -50%);
   }
 
   &-right {
-    right: -4px;
     top: 50%;
-    transform: translate(0, -50%);
+    right: 0;
+    transform: translate(50%, -50%);
   }
 }
 

From 0aa1ff2d73c08621556f7dcaf75367eb588e76d8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 10 Nov 2023 09:36:33 +0100
Subject: [PATCH 2/2] chore(changeset): add

---
 .changeset/thin-dryers-worry.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/thin-dryers-worry.md

diff --git a/.changeset/thin-dryers-worry.md b/.changeset/thin-dryers-worry.md
new file mode 100644
index 00000000..a4a6dd08
--- /dev/null
+++ b/.changeset/thin-dryers-worry.md
@@ -0,0 +1,5 @@
+---
+'@xyflow/system': major
+---
+
+Use css `translate` to align handles to the center of their side instead of using hard-coded 4px to each direction, otherwise handles with different sizes aren't correctly aligned by the default handle styles