From 0ec67dabf747abc17ebf2e7ef5ec7dedd6bd48ab Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Fri, 24 Nov 2023 16:38:11 +0100
Subject: [PATCH] fix(editor): Fix `UserStack` vertical centering
 (no-changelog) (#7806)

Dropdown items in `UserStack`component are not properly vertically
aligned. That's particularly noticeable when the items are hovered:

![image](https://github.com/n8n-io/n8n/assets/2598782/c994be3d-45e9-4b89-9973-deee5a8735ba)
---
 .../src/components/N8nUserStack/UserStack.vue              | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/packages/design-system/src/components/N8nUserStack/UserStack.vue b/packages/design-system/src/components/N8nUserStack/UserStack.vue
index d95397d134..6f4e7b174d 100644
--- a/packages/design-system/src/components/N8nUserStack/UserStack.vue
+++ b/packages/design-system/src/components/N8nUserStack/UserStack.vue
@@ -99,6 +99,7 @@ const menuHeight = computed(() => {
 									v-for="user in groupUsers"
 									:key="user.id"
 									:data-test-id="`user-stack-info-${user.id}`"
+									:class="$style.userInfoContainer"
 								>
 									<n8n-user-info
 										v-bind="user"
@@ -158,6 +159,12 @@ const menuHeight = computed(() => {
 	flex-direction: column;
 	gap: var(--spacing-2xs);
 }
+
+.userInfoContainer {
+	display: flex;
+	padding-top: var(--spacing-5xs);
+	padding-bottom: var(--spacing-5xs);
+}
 </style>
 
 <style lang="scss">