From 32e9c24e1de0e978dea1fc8d4e6dde96c1b6dfc2 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 20 Oct 2021 15:58:42 +0200
Subject: [PATCH] fix input output label positions

---
 packages/editor-ui/src/views/NodeView.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index aab13783b2..63d5f3296f 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -1523,14 +1523,13 @@ export default mixins(
 								info.connection.removeOverlay('input-name-label');
 							}
 
-							// @ts-ignore
 							info.connection.addOverlay([
 								'Label',
 								{
 									id: 'input-name-label',
-									label: inputName,
+									label: `<span>${inputName}</span>`,
 									cssClass: 'connection-input-name-label',
-									location: 0.8,
+									location: 1,
 								},
 							]);
 						}
@@ -1554,7 +1553,7 @@ export default mixins(
 									id: 'output-name-label',
 									label: outputName,
 									cssClass: 'connection-output-name-label',
-									location: 30,
+									location: 13,
 								},
 							]);
 						}
@@ -2681,11 +2680,11 @@ export default mixins(
 
 <style lang="scss">
 
-.connection-input-name-label,
+.connection-input-name-label > span,
 .connection-output-items-label,
 .connection-output-name-label {
 	border-radius: 7px;
-	background-color: rgba( $--custom-node-view-background, 0.8 );
+	background-color: rgba( $--custom-node-view-background, 1 );
 	font-size: 0.7em;
 	font-weight: var(--font-weight-regular);
 	line-height: 1.3em;
@@ -2693,6 +2692,16 @@ export default mixins(
 	white-space: nowrap;
 }
 
+.connection-input-name-label {
+	position: relative;
+
+	span {
+		position: absolute;
+		top: -10px;
+		left: -60px;
+	}
+}
+
 .connection-output-items-label {
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-regular);