fix: Update size of select components in filters dropdown (#4747)

* fix: Update size of select components in filters dropdown * fix: Update select tags styling
n8n-io · Nov 29, 2022 · d6d442d · d6d442d
1 parent 3d15c52
commit d6d442d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 9 deletions.
diff --git a/packages/design-system/src/css/select.scss b/packages/design-system/src/css/select.scss
@@ -28,10 +28,9 @@
 
 	.el-select__tags + .el-input {
 		input {
-			box-sizing: content-box;
-			padding: 0;
-			text-indent: var(--spacing-xs);
-			width: calc(100% - 2px);
+			box-sizing: border-box;
+			padding: 0 0 0 var(--spacing-2xs);
+			text-indent: 0;
 		}
 	}
 
@@ -92,7 +91,7 @@
 		border: none;
 		outline: none;
 		padding: 0;
-		margin-left: 15px;
+		margin-left: var(--spacing-2xs);
 		color: var.$select-multiple-input-color;
 		font-size: var.$select-font-size;
 		appearance: none;

diff --git a/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue b/packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue
@@ -38,7 +38,7 @@
 					:users="ownedByUsers"
 					:currentUserId="usersStore.currentUser.id"
 					:value="value.ownedBy"
-					size="small"
+					size="medium"
 					@input="setKeyValue('ownedBy', $event)"
 				/>
 			</enterprise-edition>
@@ -54,7 +54,7 @@
 					:users="sharedWithUsers"
 					:currentUserId="usersStore.currentUser.id"
 					:value="value.sharedWith"
-					size="small"
+					size="medium"
 					@input="setKeyValue('sharedWith', $event)"
 				/>
 			</enterprise-edition>

diff --git a/packages/editor-ui/src/views/CredentialsView.vue b/packages/editor-ui/src/views/CredentialsView.vue
@@ -23,7 +23,7 @@
 				/>
 				<n8n-select
 					:value="filters.type"
-					size="small"
+					size="medium"
 					multiple
 					filterable
 					ref="typeInput"

diff --git a/packages/editor-ui/src/views/WorkflowsView.vue b/packages/editor-ui/src/views/WorkflowsView.vue
@@ -62,7 +62,7 @@
 					color="text-base"
 					class="mb-3xs"
 				/>
-				<n8n-select :value="filters.status" @input="setKeyValue('status', $event)" size="small">
+				<n8n-select :value="filters.status" @input="setKeyValue('status', $event)" size="medium">
 					<n8n-option
 						v-for="option in statusFilterOptions"
 						:key="option.label"