refactor(nodes): share socket geometry

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 {

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',

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%;

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',

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;
+}