From 96cf41f8516881f0ba15b0b01dda7712f1edc845 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Tue, 21 May 2024 15:49:55 +0200
Subject: [PATCH] fix(editor): Fix project settings layout (#9475)

---
 .../features/projects/components/ProjectSettings.vue  | 11 +++++++++--
 .../features/projects/components/ProjectSharing.vue   |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/editor-ui/src/features/projects/components/ProjectSettings.vue b/packages/editor-ui/src/features/projects/components/ProjectSettings.vue
index 196c99642..2676c8c14 100644
--- a/packages/editor-ui/src/features/projects/components/ProjectSettings.vue
+++ b/packages/editor-ui/src/features/projects/components/ProjectSettings.vue
@@ -290,8 +290,9 @@ onBeforeMount(async () => {
 					:delete-label="$locale.baseText('workflows.shareModal.list.delete')"
 				>
 					<template #actions="{ user }">
-						<div class="flex gap-3">
+						<div :class="$style.buttons">
 							<N8nSelect
+								class="mr-2xs"
 								:model-value="user?.role || projectRoles[0].role"
 								size="small"
 								@update:model-value="onRoleAction(user, $event)"
@@ -325,7 +326,7 @@ onBeforeMount(async () => {
 					</template>
 				</N8nUsersList>
 			</fieldset>
-			<fieldset class="flex justify-end items-center">
+			<fieldset :class="$style.buttons">
 				<div>
 					<small v-if="isDirty" class="mr-2xs">{{
 						locale.baseText('projects.settings.message.unsavedChanges')
@@ -409,4 +410,10 @@ onBeforeMount(async () => {
 .upgrade {
 	cursor: pointer;
 }
+
+.buttons {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
+}
 </style>
diff --git a/packages/editor-ui/src/features/projects/components/ProjectSharing.vue b/packages/editor-ui/src/features/projects/components/ProjectSharing.vue
index 9adf3c12e..b809598ab 100644
--- a/packages/editor-ui/src/features/projects/components/ProjectSharing.vue
+++ b/packages/editor-ui/src/features/projects/components/ProjectSharing.vue
@@ -164,7 +164,7 @@ watch(
 	width: 100%;
 	align-items: center;
 	padding: var(--spacing-2xs) 0;
-	gap: var(--spacing-xs);
+	gap: var(--spacing-2xs);
 }
 
 .selectedProjects {