fix(editor): Move overrideButton and other options to the left to line up with container boundary (no-changelog) (#13061)

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>
 

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;

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(),
 });