From 2d0da0bb2aea0f674fc68b43abaef4c8c0fb220a Mon Sep 17 00:00:00 2001
From: "n8n-assistant[bot]"
 <100856346+n8n-assistant[bot]@users.noreply.github.com>
Date: Thu, 2 Jul 2026 11:40:00 +0000
Subject: [PATCH] fix(editor): Align parameter input sizes (backport to
 release-candidate/2.28.x) (#33448)

Co-authored-by: Rob Hough <robhough180@gmail.com>
---
 .../N8nDropdownMenu/DropdownMenu.vue          |  2 ++
 .../FilterConditions/OperatorSelect.vue       |  7 +++++-
 .../components/MultipleParameter.vue          |  2 +-
 .../components/ParameterInput.test.ts         | 24 +++++++++++++++++++
 .../parameters/components/ParameterInput.vue  | 18 ++++++++++----
 .../components/ParameterInputFull.vue         |  4 ++--
 .../components/ParameterInputList.vue         |  2 +-
 .../ParameterOverrideSelectableList.vue       |  2 +-
 .../ResourceLocator/ResourceLocator.vue       |  2 +-
 .../ResourceLocator/resourceLocator.scss      |  1 +
 .../WorkflowSelectorParameterInput.vue        |  2 +-
 11 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.vue b/packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.vue
index 0243af5141a..b4cbc1c2524 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.vue
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.vue
@@ -285,6 +285,8 @@ watch(internalOpen, (isOpen, _oldValue, onCleanup) => {
 defineExpose({ open, close });
 </script>
 
+<!-- TODO DS-580: Let consumers bind trigger props/listeners directly in the slot so their
+	element can be the actual trigger. For now this wrapper owns hover events and test ids. -->
 <template>
 	<DropdownMenuRoot :modal="modal" :open="internalOpen" @update:open="handleOpenChange">
 		<DropdownMenuTrigger as-child :disabled="disabled">
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/OperatorSelect.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/OperatorSelect.vue
index babf4bc08fc..8e1ba6ebc20 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/OperatorSelect.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/FilterConditions/OperatorSelect.vue
@@ -104,6 +104,11 @@ const onSelect = (operatorId: string): void => {
 .wrapper {
 	width: 100%;
 	height: 100%;
+
+	/* TODO DS-580: Remove when child consumers of DropdownMenu trigger aren't wrapped in containing span */
+	> [aria-haspopup='menu'] {
+		width: 100%;
+	}
 }
 
 .trigger {
@@ -112,7 +117,7 @@ const onSelect = (operatorId: string): void => {
 	gap: var(--spacing--3xs);
 	width: 100%;
 	height: 100%;
-	min-height: 30px;
+	min-height: var(--height--md);
 	padding: 0 var(--spacing--2xs);
 	border: var(--border-width) var(--border-style) var(--input--border-color, var(--border-color));
 	border-top-left-radius: var(--input--radius--top-left, var(--input--radius, 0));
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue
index bd2baaf4124..44e3dea6424 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/MultipleParameter.vue
@@ -166,7 +166,7 @@ const valueChanged = (parameterData: IUpdateInformation) => {
 					:display-options="true"
 					:hide-label="true"
 					:path="getPath(index)"
-					input-size="medium"
+					input-size="small"
 					:is-read-only="isReadOnly"
 					@update="valueChanged"
 				/>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.test.ts b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.test.ts
index 64cf86c8cf6..4de84884c2f 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.test.ts
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.test.ts
@@ -277,6 +277,13 @@ describe('ParameterInput.vue', () => {
 		);
 	});
 
+	/**
+	 * TODO DS-579:
+	 * N8nInput and N8nSelect don't have aligned size tokens.
+	 * What is 'medium' for one isn't the same the other.
+	 * This has caused a few bugs where coding models have mixed the sizes up and they've slipped through the review.
+	 * For now, we'll use these tests to prevent further regression mixing the two up.
+	 */
 	test('uses medium input size by default', () => {
 		const { getByTestId } = renderComponent({
 			props: {
@@ -301,6 +308,23 @@ describe('ParameterInput.vue', () => {
 		expect(getByTestId('parameter-input-field')).toHaveAttribute('data-size', 'medium');
 	});
 
+	test('uses small select size by default', () => {
+		const { container } = renderComponent({
+			props: {
+				path: 'operation',
+				parameter: createTestNodeProperties({
+					displayName: 'Operation',
+					name: 'operation',
+					type: 'options',
+					options: [{ name: 'Append Row', value: 'append' }],
+				}),
+				modelValue: 'append',
+			},
+		});
+
+		expect(container.querySelector('.el-select')).toHaveClass('el-select--small');
+	});
+
 	test('should render a string parameter', async () => {
 		const { container, emitted } = renderComponent({
 			props: {
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue
index f24ee68285a..3f0f3b3aa85 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue
@@ -146,7 +146,7 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {
 	rows: 5,
 	hint: undefined,
-	inputSize: 'medium',
+	inputSize: 'small',
 	eventSource: undefined,
 	documentationUrl: undefined,
 	isReadOnly: false,
@@ -376,6 +376,14 @@ const editorIsReadOnly = computed<boolean>(() => {
 	return getTypeOption('editorIsReadOnly') ?? false;
 });
 
+/**
+ * Custom mapping needed until DS-579 is complete.
+ * This aligns the height sizes of N8nInput with those of N8nSelect.
+ */
+const parameterInputSize = computed<InputSize>(() => {
+	return props.inputSize === 'small' ? 'medium' : props.inputSize;
+});
+
 const editorLanguage = computed<CodeNodeLanguageOption>(() => {
 	if (editorType.value === 'json' || props.parameter.type === 'json') return 'json';
 
@@ -1774,7 +1782,7 @@ onUpdated(async () => {
 					ref="inputField"
 					v-model="tempValue"
 					:class="{ 'input-with-opener': true, 'ph-no-capture': shouldRedactValue }"
-					:size="inputSize"
+					:size="parameterInputSize"
 					:type="getStringInputType"
 					:rows="editorRows"
 					:disabled="
@@ -1831,7 +1839,7 @@ onUpdated(async () => {
 				/>
 				<N8nInput
 					v-model="tempValue"
-					:size="inputSize"
+					:size="parameterInputSize"
 					type="text"
 					:disabled="isReadOnly"
 					:title="displayTitle"
@@ -1986,7 +1994,7 @@ onUpdated(async () => {
 
 			<N8nInput
 				v-else-if="parameter.type === 'boolean' && isCollectionOverhaulEnabled && droppable"
-				:size="inputSize"
+				:size="parameterInputSize"
 				:disabled="isReadOnly"
 				:title="displayTitle"
 				class="switch-droppable-input"
@@ -2003,7 +2011,7 @@ onUpdated(async () => {
 
 			<N8nInput
 				v-else-if="parameter.type === 'boolean' && droppable"
-				:size="inputSize"
+				:size="parameterInputSize"
 				:model-value="JSON.stringify(displayValue)"
 				:disabled="isReadOnly"
 				:title="displayTitle"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputFull.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputFull.vue
index 0992bc64533..29e20cfd16c 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputFull.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputFull.vue
@@ -380,7 +380,7 @@ function removeOverride(clearField = false) {
 					:hide-issues="hideIssues"
 					:label="label"
 					:event-bus="eventBus"
-					input-size="medium"
+					input-size="small"
 					@update="valueChanged"
 					@text-input="onTextInput"
 					@focus="onFocus"
@@ -496,7 +496,7 @@ function removeOverride(clearField = false) {
 						:event-bus="eventBus"
 						:can-be-overridden="canCreateContentOverride"
 						:hide-label="hideLabel"
-						input-size="medium"
+						input-size="small"
 						@update="valueChanged"
 						@text-input="onTextInput"
 						@focus="onFocus"
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue
index 11227bf1720..e90229c10ed 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputList.vue
@@ -898,7 +898,7 @@ watch(
 				:dependent-parameters-values="item.dependentParametersValues"
 				:is-read-only="isReadOnly"
 				:allow-empty-strings="item.parameter.typeOptions?.resourceMapper?.allowEmptyValues"
-				input-size="medium"
+				input-size="small"
 				label-size="small"
 				@value-changed="valueChanged"
 			/>
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
index 88d06ac6280..bac2c8bb518 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInputOverrides/ParameterOverrideSelectableList.vue
@@ -69,7 +69,7 @@ function onExtraPropValueRemove(name: string) {
 				:is-read-only="isReadOnly"
 				:value="parameterOverride?.extraPropValues[name]"
 				:path="`${path}.${name}`"
-				input-size="medium"
+				input-size="small"
 				@update="
 					(x: IUpdateInformation) => {
 						parameterOverride.extraPropValues[name] = x.value;
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/ResourceLocator.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/ResourceLocator.vue
index 4960e167db1..6241c3983be 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/ResourceLocator.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/ResourceLocator.vue
@@ -119,7 +119,7 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {
 	node: undefined,
 	loadOptionsMethod: undefined,
-	inputSize: 'medium',
+	inputSize: 'small',
 	parameterIssues: () => [],
 	dependentParametersValues: null,
 	displayTitle: '',
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/resourceLocator.scss b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/resourceLocator.scss
index f450def5b26..28411b0c80a 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/resourceLocator.scss
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/ResourceLocator/resourceLocator.scss
@@ -112,6 +112,7 @@ $--mode-selector-width: 92px;
 .selectInput input {
 	overflow: hidden;
 	text-overflow: ellipsis;
+	min-height: 30px;
 }
 
 .selectIcon {
diff --git a/packages/frontend/editor-ui/src/features/ndv/parameters/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue b/packages/frontend/editor-ui/src/features/ndv/parameters/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
index 9274712416e..cfa52511e93 100644
--- a/packages/frontend/editor-ui/src/features/ndv/parameters/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
+++ b/packages/frontend/editor-ui/src/features/ndv/parameters/components/WorkflowSelectorParameterInput/WorkflowSelectorParameterInput.vue
@@ -58,7 +58,7 @@ export interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
 	eventBus: () => createEventBus(),
-	inputSize: 'medium',
+	inputSize: 'small',
 	isValueExpression: false,
 	isReadOnly: false,
 	forceShowExpression: false,