fix(editor): Shorten overflowing Node Label in InputLabels on hover and focus (#11110)

packages/design-system/src/components/N8nInputLabel/InputLabel.vue

@@ -33,7 +33,14 @@ const addTargetBlank = (html: string) =>
 </script>
 
 <template>
-	<div :class="$style.container" v-bind="$attrs" data-test-id="input-label">
+	<div
+		:class="{
+			[$style.container]: true,
+			[$style.withOptions]: $slots.options,
+		}"
+		v-bind="$attrs"
+		data-test-id="input-label"
+	>
 		<label
 			v-if="label || $slots.options"
 			:for="inputName"
@@ -47,7 +54,15 @@ const addTargetBlank = (html: string) =>
 			}"
 		>
 			<div v-if="label" :class="$style.title">
-				<N8nText :bold="bold" :size="size" :compact="compact" :color="color">
+				<N8nText
+					:bold="bold"
+					:size="size"
+					:compact="compact"
+					:color="color"
+					:class="{
+						[$style.textEllipses]: showOptions,
+					}"
+				>
 					{{ label }}
 					<N8nText v-if="required" color="primary" :bold="bold" :size="size">*</N8nText>
 				</N8nText>
@@ -107,6 +122,12 @@ const addTargetBlank = (html: string) =>
 		transition: opacity 100ms ease-in; // transition on hover in
 	}
 }
+.withOptions:hover {
+	.title > span {
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+}
 
 .title {
 	display: flex;
@@ -170,6 +191,11 @@ const addTargetBlank = (html: string) =>
 	overflow-y: clip;
 }
 
+.textEllipses {
+	text-overflow: ellipsis;
+	overflow: hidden;
+}
+
 .heading {
 	display: flex;
 

packages/design-system/src/components/N8nInputLabel/__tests__/InputLabel.spec.ts

@@ -0,0 +1,32 @@
+import { render } from '@testing-library/vue';
+
+import InputLabel from '../InputLabel.vue';
+
+describe('component', () => {
+	describe('Text overflow behavior', () => {
+		it('displays full text without options', () => {
+			const { container } = render(InputLabel, {
+				props: {
+					label: 'a label',
+				},
+			});
+
+			expect(container.querySelectorAll('.textEllipses').length).eq(0);
+
+			expect(container).toMatchSnapshot();
+		});
+
+		it('displays ellipsis with options', () => {
+			const { container } = render(InputLabel, {
+				props: {
+					label: 'a label',
+					showOptions: true,
+				},
+			});
+
+			expect(container.querySelectorAll('.textEllipses').length).eq(1);
+
+			expect(container).toMatchSnapshot();
+		});
+	});
+});

packages/design-system/src/components/N8nInputLabel/__tests__/__snapshots__/InputLabel.spec.ts.snap

@@ -0,0 +1,63 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`component > Text overflow behavior > displays ellipsis with options 1`] = `
+<div>
+  <div
+    class="container"
+    data-test-id="input-label"
+  >
+    <label
+      class="n8n-input-label inputLabel heading medium"
+    >
+      <div
+        class="title"
+      >
+        <span
+          class="n8n-text size-medium bold textEllipses textEllipses"
+        >
+          
+          a label 
+          <!--v-if-->
+          
+        </span>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </label>
+    
+    
+  </div>
+</div>
+`;
+
+exports[`component > Text overflow behavior > displays full text without options 1`] = `
+<div>
+  <div
+    class="container"
+    data-test-id="input-label"
+  >
+    <label
+      class="n8n-input-label inputLabel heading medium"
+    >
+      <div
+        class="title"
+      >
+        <span
+          class="n8n-text size-medium bold"
+        >
+          
+          a label 
+          <!--v-if-->
+          
+        </span>
+      </div>
+      <!--v-if-->
+      <!--v-if-->
+      <!--v-if-->
+    </label>
+    
+    
+  </div>
+</div>
+`;