From 2492c35e9016ce24df2dbe5dfe39f0c74350a7fb Mon Sep 17 00:00:00 2001
From: Charlie Kolb <charlie@n8n.io>
Date: Wed, 5 Feb 2025 11:25:32 +0100
Subject: [PATCH] fix(editor): Move overrideButton and other options to the
 left to line up with container boundary (no-changelog) (#13061)

---
 .../editor-ui/src/components/ParameterInput.vue    | 13 +++++++++----
 .../src/components/ParameterInputFull.vue          | 14 +++++++++++++-
 .../src/components/ParameterInputWrapper.vue       |  2 ++
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/editor-ui/src/components/ParameterInput.vue b/packages/editor-ui/src/components/ParameterInput.vue
index 8f37479174..661580bb6b 100644
--- a/packages/editor-ui/src/components/ParameterInput.vue
+++ b/packages/editor-ui/src/components/ParameterInput.vue
@@ -400,6 +400,13 @@ const getIssues = computed<string[]>(() => {
 	return [];
 });
 
+const displayIssues = computed(
+	() =>
+		props.parameter.type !== 'credentialsSelect' &&
+		!isResourceLocatorParameter.value &&
+		getIssues.value.length > 0,
+);
+
 const editorType = computed<EditorType | 'json' | 'code'>(() => {
 	return getArgument<EditorType>('editor');
 });
@@ -1019,6 +1026,7 @@ const isSingleLineInput = computed(() => {
 
 defineExpose({
 	isSingleLineInput,
+	displaysIssues: displayIssues.value,
 	focusInput: async () => await setFocus(),
 	selectInput: () => selectInput(),
 });
@@ -1597,10 +1605,7 @@ onUpdated(async () => {
 		>
 			<slot name="overrideButton" />
 		</div>
-		<ParameterIssues
-			v-if="parameter.type !== 'credentialsSelect' && !isResourceLocatorParameter"
-			:issues="getIssues"
-		/>
+		<ParameterIssues v-if="displayIssues" :issues="getIssues" />
 	</div>
 </template>
 
diff --git a/packages/editor-ui/src/components/ParameterInputFull.vue b/packages/editor-ui/src/components/ParameterInputFull.vue
index 92a2dbfe1f..8e2453becf 100644
--- a/packages/editor-ui/src/components/ParameterInputFull.vue
+++ b/packages/editor-ui/src/components/ParameterInputFull.vue
@@ -321,7 +321,13 @@ function removeOverride(clearField = false) {
 			v-if="showOverrideButton && !isSingleLineInput && optionsPosition === 'top'"
 			#persistentOptions
 		>
-			<div :class="[$style.noCornersBottom, $style.overrideButtonInOptions]">
+			<div
+				:class="[
+					$style.noCornersBottom,
+					$style.overrideButtonInOptions,
+					{ [$style.overrideButtonIssueOffset]: parameterInputWrapper?.displaysIssues },
+				]"
+			>
 				<FromAiOverrideButton @click="applyOverride" />
 			</div>
 		</template>
@@ -427,6 +433,12 @@ function removeOverride(clearField = false) {
 	margin-bottom: -2px;
 }
 
+.overrideButtonIssueOffset {
+	right: 20px;
+	// this is necessary to push the other options to the left
+	margin-left: 20px;
+}
+
 .noCornersBottom > button {
 	border-bottom-right-radius: 0;
 	border-bottom-left-radius: 0;
diff --git a/packages/editor-ui/src/components/ParameterInputWrapper.vue b/packages/editor-ui/src/components/ParameterInputWrapper.vue
index 0770e562fa..d49c2855ed 100644
--- a/packages/editor-ui/src/components/ParameterInputWrapper.vue
+++ b/packages/editor-ui/src/components/ParameterInputWrapper.vue
@@ -155,8 +155,10 @@ function onTextInput(parameterData: IUpdateInformation) {
 
 const param = useTemplateRef('param');
 const isSingleLineInput = computed(() => param.value?.isSingleLineInput);
+const displaysIssues = computed(() => param.value?.displaysIssues);
 defineExpose({
 	isSingleLineInput,
+	displaysIssues,
 	focusInput: () => param.value?.focusInput(),
 	selectInput: () => param.value?.selectInput(),
 });