fix(editor): Repair fromAI override and button styling (#26682)

Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>

packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue

@@ -1384,6 +1384,7 @@ onUpdated(async () => {
 				'ignore-key-press-canvas',
 				{
 					[$style.noRightCornersInput]: canBeOverridden,
+					'no-right-corners': canBeOverridden,
 				},
 			]"
 			:style="parameterInputWrapperStyle"
@@ -2170,6 +2171,11 @@ onUpdated(async () => {
 		height: 100%;
 	}
 }
+
+.no-right-corners .n8n-input__wrapper {
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
 </style>
 
 <style lang="css" module>

packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputFull.vue

@@ -437,7 +437,7 @@ function removeOverride(clearField = false) {
 					{ [$style.overrideButtonIssueOffset]: parameterInputWrapper?.displaysIssues },
 				]"
 			>
-				<FromAiOverrideButton @click="applyOverride" />
+				<FromAiOverrideButton position="standalone" @click="applyOverride" />
 			</div>
 		</template>
 

packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideButton.vue

@@ -2,9 +2,16 @@
 import { useI18n } from '@n8n/i18n';
 import AiStarsIcon from '@/app/components/AiStarsIcon.vue';
 
-import { N8nButton, N8nTooltip } from '@n8n/design-system';
+import { N8nTooltip } from '@n8n/design-system';
 const i18n = useI18n();
 
+withDefaults(
+	defineProps<{
+		position?: 'inline' | 'standalone';
+	}>(),
+	{ position: 'inline' },
+);
+
 const emit = defineEmits<{
 	click: [];
 }>();
@@ -16,32 +23,29 @@ const emit = defineEmits<{
 			<div>{{ i18n.baseText('parameterOverride.applyOverrideButtonTooltip') }}</div>
 		</template>
 
-		<N8nButton
-			variant="subtle"
-			:class="[$style.overrideButton]"
+		<div
+			:class="[$style.overrideButton, $style[position]]"
 			data-test-id="from-ai-override-button"
 			@click="emit('click')"
 		>
-			<span>
-				<!-- The span wrapping the icon centers it due to reliance on legacy behavior -->
-				<AiStarsIcon size="large" />
-			</span>
-		</N8nButton>
+			<AiStarsIcon size="large" />
+		</div>
 	</N8nTooltip>
 </template>
 
 <style lang="scss" module>
 .overrideButton {
 	display: flex;
+	align-items: center;
 	justify-content: center;
-	border: 0;
 	height: 30px;
 	width: 30px;
 	background-color: var(--color--foreground);
 	color: var(--color--foreground--shade-2);
+	cursor: pointer;
+	border: 0;
 
 	&:hover {
-		color: var(--color--foreground--shade-2);
 		background-color: var(--color--secondary);
 
 		svg {
@@ -50,4 +54,17 @@ const emit = defineEmits<{
 		}
 	}
 }
+
+.inline {
+	border-left: 0;
+	border-top-right-radius: var(--radius);
+	border-bottom-right-radius: var(--radius);
+}
+
+.standalone {
+	background-color: var(--color--foreground);
+	border-top: 0;
+	border-top-left-radius: var(--radius);
+	border-top-right-radius: var(--radius);
+}
 </style>

packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/FromAiOverrideField.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { i18n } from '@n8n/i18n';
 
-import { N8nIconButton, N8nText } from '@n8n/design-system';
+import { N8nIcon, N8nText } from '@n8n/design-system';
 import AiStarsIcon from '@/app/components/AiStarsIcon.vue';
 defineProps<{
 	isReadOnly?: boolean;
@@ -14,7 +14,7 @@ const emit = defineEmits<{
 
 <template>
 	<div :class="$style.contentOverrideContainer" data-test-id="fromAI-override-field">
-		<div :class="[$style.iconStars, 'el-input-group__prepend', $style.noCornersRight]">
+		<div :class="[$style.iconStars, $style.noCornersRight]">
 			<AiStarsIcon />
 		</div>
 		<div :class="$style.overrideInput">
@@ -24,15 +24,9 @@ const emit = defineEmits<{
 				size="small"
 			/>
 		</div>
-		<N8nIconButton
-			variant="subtle"
-			v-if="!isReadOnly"
-			:class="['n8n-input', $style.overrideCloseButton]"
-			:outline="false"
-			icon="x"
-			size="small"
-			@click="emit('close')"
-		/>
+		<div v-if="!isReadOnly" :class="[$style.overrideCloseButton]" @click="emit('close')">
+			<N8nIcon v-if="!isReadOnly" icon="x" size="small" />
+		</div>
 	</div>
 </template>
 
@@ -42,9 +36,9 @@ const emit = defineEmits<{
 	padding-left: 8px;
 	width: 22px;
 	text-align: center;
-	border: none;
+	border: 0;
 	color: var(--color--foreground--shade-2);
-	background-color: var(--color--foreground);
+	background-color: unset;
 }
 
 .noCornersRight {
@@ -60,13 +54,18 @@ const emit = defineEmits<{
 }
 
 .overrideCloseButton {
-	padding: 0 var(--spacing--2xs);
 	border: 0;
-	color: var(--color--text);
+	color: var(--color--text--tint-1);
 	margin-left: auto;
-	--button--color--background--hover: transparent;
-	--button--color--background--active: transparent;
-	background-color: var(--color--foreground);
+	padding: 0 var(--spacing--2xs);
+	align-self: stretch;
+	display: flex;
+	align-items: center;
+	cursor: pointer;
+
+	&:hover {
+		color: var(--color--text);
+	}
 }
 
 .contentOverrideContainer {