From 9f67d2f116d8da72a1725f7af24cbc7494e135ca Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Wed, 3 Nov 2021 16:13:40 +0100
Subject: [PATCH] two line names

---
 packages/editor-ui/src/components/Node.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/Node.vue b/packages/editor-ui/src/components/Node.vue
index 74ce209095..72c10da151 100644
--- a/packages/editor-ui/src/components/Node.vue
+++ b/packages/editor-ui/src/components/Node.vue
@@ -45,7 +45,7 @@
 		</div>
 		<div :class="{'node-description': true, 'limited': isSelected}">
 			<div class="node-name" :title="data.name">
-				{{data.name}}
+				<p>{{data.name}}</p>
 			</div>
 			<div v-if="nodeSubtitle !== undefined" class="node-subtitle" :title="nodeSubtitle">
 				{{nodeSubtitle}}
@@ -275,10 +275,16 @@ export default mixins(externalHooks, nodeBase, nodeHelpers, workflowHelpers).ext
 		}
 
 		.node-name {
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			font-weight: var(--font-weight-bold);
+			> p { // must be paragraph tag to have two lines in safari
+				text-overflow: ellipsis;
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: 2;
+				overflow: hidden;
+				overflow-wrap: anywhere;
+				font-weight: var(--font-weight-bold);
+				line-height: var(--font-line-height-compact);
+			}
 		}
 
 		.node-subtitle {