fix(editor): Fix resource mapper dropdown width and disabled styling (#6493)

* fix(editor): Fix resource mapper dropdown width and disabled styling
* 💄 Tweaking the color for disabled dropdowns

packages/editor-ui/src/components/ResourceMapper/MappingFields.vue

@@ -346,7 +346,7 @@ defineExpose({
 				:class="[$style.parameterIssues, 'ml-5xs']"
 			/>
 		</div>
-		<div class="add-option" data-test-id="add-fields-select">
+		<div :class="['add-option', $style.addOption]" data-test-id="add-fields-select">
 			<n8n-select
 				:placeholder="
 					locale.baseText('resourceMapper.addFieldToSend', {
@@ -373,7 +373,7 @@ defineExpose({
 <style module lang="scss">
 .parameterItem {
 	display: flex;
-	padding: 0 0 0 1em;
+	padding: 0 0 0 var(--spacing-s);
 
 	.parameterInput {
 		width: 100%;
@@ -395,4 +395,9 @@ defineExpose({
 .parameterTooltipIcon {
 	color: var(--color-text-light) !important;
 }
+
+.addOption {
+	margin-top: var(--spacing-l);
+	padding: 0 0 0 var(--spacing-s);
+}
 </style>

packages/editor-ui/src/n8n-theme.scss

@@ -184,10 +184,22 @@
 		border: none;
 	}
 
-	i.el-select__caret {
+	.el-select .el-input.is-disabled {
+		.el-input__icon {
+			opacity: 1 !important;
+			cursor: not-allowed;
+			color: var(--color-foreground-dark);
+		}
+		.el-input__inner, .el-input__inner::placeholder {
+			opacity: 1;
+			color: var(--color-foreground-dark);
+		}
+	}
+	.el-select .el-input:not(.is-disabled ) .el-input__icon {
 		color: var(--color-text-dark);
 	}
-	.el-input .el-input__inner {
+	.el-input .el-input__inner { text-align: center; }
+	.el-input:not(.is-disabled) .el-input__inner {
 		&,
 		&:hover,
 		&:focus {