feat: improve node label readability

n8n-io · Aug 15, 2024 · 633334c · 633334c
1 parent 5e1f4cf
commit 633334c
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue b/packages/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue
@@ -213,7 +213,7 @@ function openContextMenu(event: MouseEvent) {
 	top: 100%;
 	position: absolute;
 	width: 100%;
-	min-width: 200px;
+	min-width: calc(var(--canvas-node--width) * 2);
 	margin-top: var(--spacing-2xs);
 	display: flex;
 	flex-direction: column;
@@ -223,16 +223,27 @@ function openContextMenu(event: MouseEvent) {
 
 .label {
 	font-size: var(--font-size-m);
-	line-height: var(--font-line-height-compact);
 	text-align: center;
+	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);
 }
 
 .subtitle {
+	width: 100%;
+	text-align: center;
 	color: var(--color-text-light);
 	font-size: var(--font-size-xs);
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	line-height: var(--font-line-height-compact);
+	font-weight: 400;
 }
 
 .statusIcons {