From 5bb339a6f09ea40ef244a5a2dfe15ccc80f96670 Mon Sep 17 00:00:00 2001
From: Lucio Lelii <lucio.lelii@isti.cnr.it>
Date: Wed, 30 Sep 2026 11:29:43 +0200
Subject: [PATCH] refactor(nodes): share socket geometry

---
 .../nodes/container-node/container-node.css   | 22 +++++--------------
 .../nodes/container-node/container-node.html  |  8 +++----
 .../nodes/generic-node/generic-node.css       | 12 ----------
 .../nodes/generic-node/generic-node.html      |  8 +++----
 src/styles.css                                | 13 +++++++++++
 5 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/src/app/shared/nodes/container-node/container-node.css b/src/app/shared/nodes/container-node/container-node.css
index a71652d..68fe1e5 100644
--- a/src/app/shared/nodes/container-node/container-node.css
+++ b/src/app/shared/nodes/container-node/container-node.css
@@ -430,28 +430,16 @@
 }
 
 .container-node__port-row {
-  display: flex;
+  display: grid;
   align-items: center;
-  gap: 0;
+  grid-template-columns: 0 minmax(0, 1fr);
+  min-width: 0;
+  min-height: 36px;
   margin-bottom: 8px;
 }
 
 .container-node__port-row--right {
-  justify-content: flex-end;
-}
-
-.container-node__socket {
-  position: relative;
-  flex: 0 0 0;
-  width: 0;
-  /* Keep the connection handle flush with the card instead of floating outside it. */
-  left: -12px;
-  z-index: 20;
-}
-
-.container-node__socket--right {
-  left: auto;
-  right: -12px;
+  grid-template-columns: minmax(0, 1fr) 0;
 }
 
 .container-node__port-label {
diff --git a/src/app/shared/nodes/container-node/container-node.html b/src/app/shared/nodes/container-node/container-node.html
index 125adbc..8fc5fca 100644
--- a/src/app/shared/nodes/container-node/container-node.html
+++ b/src/app/shared/nodes/container-node/container-node.html
@@ -128,7 +128,7 @@
       <div class="container-node__port-row">
         <div
           refComponent
-          class="container-node__socket"
+          class="container-node__socket flow-node-socket"
           [data]="{
             type: 'socket',
             side: 'input',
@@ -163,7 +163,7 @@
         </span>
         <div
           refComponent
-          class="container-node__socket container-node__socket--right"
+          class="container-node__socket container-node__socket--right flow-node-socket flow-node-socket--right"
           [data]="{
             type: 'socket',
             side: 'output',
@@ -187,7 +187,7 @@
       <div class="container-node__port-row">
         <div
           refComponent
-          class="container-node__socket"
+          class="container-node__socket flow-node-socket"
           [data]="{
             type: 'socket',
             side: 'input',
@@ -214,7 +214,7 @@
         </span>
         <div
           refComponent
-          class="container-node__socket container-node__socket--right"
+          class="container-node__socket container-node__socket--right flow-node-socket flow-node-socket--right"
           [data]="{
             type: 'socket',
             side: 'output',
diff --git a/src/app/shared/nodes/generic-node/generic-node.css b/src/app/shared/nodes/generic-node/generic-node.css
index e091879..8a19cf2 100644
--- a/src/app/shared/nodes/generic-node/generic-node.css
+++ b/src/app/shared/nodes/generic-node/generic-node.css
@@ -626,18 +626,6 @@
   opacity: 0;
 }
 
-.llm-socket {
-  position: relative;
-  left: -16px;
-  z-index: 20;
-}
-
-.llm-socket-right {
-  left: auto;
-  right: -16px;
-  justify-self: end;
-}
-
 .llm-pill {
   min-height: 32px;
   width: 100%;
diff --git a/src/app/shared/nodes/generic-node/generic-node.html b/src/app/shared/nodes/generic-node/generic-node.html
index f45e0c4..64f316f 100644
--- a/src/app/shared/nodes/generic-node/generic-node.html
+++ b/src/app/shared/nodes/generic-node/generic-node.html
@@ -147,7 +147,7 @@
       <div class="llm-row llm-row-input">
         <div
           refComponent
-          class="llm-socket"
+          class="llm-socket flow-node-socket"
           [data]="{
             type: 'socket',
             side: 'input',
@@ -206,7 +206,7 @@
         </span>
         <div
           refComponent
-          class="llm-socket llm-socket-right"
+          class="llm-socket llm-socket-right flow-node-socket flow-node-socket--right"
           [data]="{
             type: 'socket',
             side: 'output',
@@ -263,7 +263,7 @@
       <div class="llm-row llm-row-input">
         <div
           refComponent
-          class="llm-socket"
+          class="llm-socket flow-node-socket"
           [data]="{
             type: 'socket',
             side: 'input',
@@ -286,7 +286,7 @@
         <span class="llm-pill llm-pill-output llm-pill-dependency-output">Prerequisite of</span>
         <div
           refComponent
-          class="llm-socket llm-socket-right"
+          class="llm-socket llm-socket-right flow-node-socket flow-node-socket--right"
           [data]="{
             type: 'socket',
             side: 'output',
diff --git a/src/styles.css b/src/styles.css
index 040e66c..c06809b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -727,3 +727,16 @@ body.node-focus-modal-open {
 .blocks-list-kind-menu .mat-mdc-menu-item .mat-icon {
   margin-right: 8px;
 }
+
+/* Shared connection-handle geometry for flow node cards. */
+.flow-node-socket {
+  position: relative;
+  left: -16px;
+  z-index: 20;
+}
+
+.flow-node-socket--right {
+  left: auto;
+  right: -16px;
+  justify-self: end;
+}