fix(editor): Tag styling issues (#15336)

packages/frontend/@n8n/design-system/src/components/N8nTag/Tag.vue

@@ -20,7 +20,7 @@ withDefaults(defineProps<TagProps>(), {
 .tag {
 	min-width: max-content;
 	padding: 1px var(--spacing-4xs);
-	color: var(--color-text-dark);
+	color: var(--color-text-base);
 	background-color: var(--color-background-base);
 	border-radius: var(--border-radius-base);
 	font-size: var(--font-size-2xs);

packages/frontend/@n8n/design-system/src/components/N8nTags/Tags.vue

@@ -77,6 +77,7 @@ const onExpand = () => {
 	flex-wrap: wrap;
 	align-items: center;
 	overflow-x: scroll;
+	gap: var(--spacing-4xs);
 
 	/* Hide scrollbar for Chrome, Safari and Opera */
 	&::-webkit-scrollbar {
@@ -88,9 +89,5 @@ const onExpand = () => {
 	scrollbar-width: none; /* Firefox */
 
 	margin-top: calc(var(--spacing-4xs) * -1); // Cancel out top margin of first tags row
-
-	* {
-		margin: var(--spacing-4xs) var(--spacing-4xs) 0 0;
-	}
 }
 </style>

packages/frontend/@n8n/design-system/src/css/tag.scss

@@ -175,7 +175,7 @@
 	@include mixins.m(mini) {
 		height: 20px;
 		padding: 0 5px;
-		line-height: 18px;
+		line-height: 16px;
 
 		.el-icon.el-tag__close {
 			margin-left: -3px;

packages/frontend/editor-ui/src/components/TagsContainer.vue

@@ -156,7 +156,7 @@ onBeforeUnmount(() => {
 					<el-tag
 						:title="tag.name"
 						type="info"
-						size="small"
+						size="mini"
 						:class="{ hoverable }"
 						:disable-transitions="true"
 					>

packages/frontend/editor-ui/src/components/TagsDropdown.vue

@@ -282,7 +282,7 @@ onClickOutside(
 
 	.el-tag {
 		padding: var(--spacing-5xs) var(--spacing-4xs);
-		color: var(--color-text-dark);
+		color: var(--color-text-base);
 		background-color: var(--color-background-base);
 		border-radius: var(--border-radius-base);
 		font-size: var(--font-size-2xs);