From da330f0648b85c39e89ca2eeaba94f9b2c3a1b13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Tue, 20 Jun 2023 18:51:51 +0200
Subject: [PATCH] fix(editor): Fix resource mapper dropdown width and disabled
 styling (#6493)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(editor): Fix resource mapper dropdown width and disabled styling
* 💄 Tweaking the color for disabled dropdowns
---
 .../components/ResourceMapper/MappingFields.vue  |  9 +++++++--
 packages/editor-ui/src/n8n-theme.scss            | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue b/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
index 83b62f5d4b..2d0e0517c9 100644
--- a/packages/editor-ui/src/components/ResourceMapper/MappingFields.vue
+++ b/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>
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index a099eda430..74c528d3cf 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/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 {