From 1942fd82323183fb31af671ccb8d22f6a4798d7f Mon Sep 17 00:00:00 2001
From: Giulio Andreini <g.andreini@gmail.com>
Date: Mon, 27 Feb 2023 07:25:57 +0100
Subject: [PATCH] feat(editor): Show parameter hint on multilines (#5014)

Single/multi line for hints.
---
 .../editor-ui/src/components/ParameterInputHint.vue | 13 +++++++++----
 .../src/components/ParameterInputWrapper.vue        |  1 +
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInputHint.vue b/packages/editor-ui/src/components/ParameterInputHint.vue
index 125eb74f53..f0a39b4e0a 100644
--- a/packages/editor-ui/src/components/ParameterInputHint.vue
+++ b/packages/editor-ui/src/components/ParameterInputHint.vue
@@ -1,12 +1,15 @@
 <template>
 	<n8n-text size="small" color="text-base" tag="div" v-if="hint">
-		<div v-if="!renderHTML" :class="{ [$style.hint]: true, [$style.highlight]: highlight }">
+		<div
+			v-if="!renderHTML"
+			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
+		>
 			{{ hint }}
 		</div>
 		<div
 			v-else
 			ref="hint"
-			:class="{ [$style.hint]: true, [$style.highlight]: highlight }"
+			:class="{ [$style.singleline]: singleLine, [$style.highlight]: highlight }"
 			v-html="sanitizeHtml(hint)"
 		></div>
 	</n8n-text>
@@ -25,6 +28,9 @@ export default Vue.extend({
 		highlight: {
 			type: Boolean,
 		},
+		singleLine: {
+			type: Boolean,
+		},
 		renderHTML: {
 			type: Boolean,
 			default: false,
@@ -42,12 +48,11 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" module>
-.hint {
+.singleline {
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
 .highlight {
 	color: var(--color-secondary);
 }
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 0fc39cefdd..441c3979cb 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -29,6 +29,7 @@
 			data-test-id="parameter-expression-preview"
 			:highlight="!!(expressionOutput && targetItem)"
 			:hint="expressionOutput"
+			:singleLine="true"
 		/>
 		<input-hint
 			v-else-if="parameterHint"