From 09ddce05800f426d33489ae28c416bb6aab2fd91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 30 Dec 2024 15:52:09 +0100
Subject: [PATCH] fix(editor): Minor styling improvements in project settings
 page (#12405)

---
 .../src/components/Projects/ProjectHeader.vue | 40 ++++++++-----------
 .../src/components/Projects/ProjectIcon.vue   | 20 ++++++++--
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/editor-ui/src/components/Projects/ProjectHeader.vue b/packages/editor-ui/src/components/Projects/ProjectHeader.vue
index 191c7d7dd5..a2b801766f 100644
--- a/packages/editor-ui/src/components/Projects/ProjectHeader.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectHeader.vue
@@ -107,16 +107,18 @@ const onSelect = (action: string) => {
 <template>
 	<div>
 		<div :class="[$style.projectHeader]">
-			<ProjectIcon :icon="headerIcon" size="medium" />
-			<div>
-				<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
-				<N8nText color="text-light">
-					<slot name="subtitle">
-						<span v-if="!projectsStore.currentProject">{{
-							i18n.baseText('projects.header.subtitle')
-						}}</span>
-					</slot>
-				</N8nText>
+			<div :class="[$style.projectDetails]">
+				<ProjectIcon :icon="headerIcon" :border-less="true" size="medium" />
+				<div>
+					<N8nHeading bold tag="h2" size="xlarge">{{ projectName }}</N8nHeading>
+					<N8nText color="text-light">
+						<slot name="subtitle">
+							<span v-if="!projectsStore.currentProject">{{
+								i18n.baseText('projects.header.subtitle')
+							}}</span>
+						</slot>
+					</N8nText>
+				</div>
 			</div>
 			<div v-if="route.name !== VIEWS.PROJECT_SETTINGS" :class="[$style.headerActions]">
 				<N8nTooltip
@@ -148,25 +150,17 @@ const onSelect = (action: string) => {
 .projectHeader {
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	justify-content: space-between;
 	padding-bottom: var(--spacing-m);
-	min-height: 64px;
+	min-height: var(--spacing-3xl);
 }
 
-.headerActions {
-	margin-left: auto;
-}
-
-.icon {
-	border: 1px solid var(--color-foreground-light);
-	padding: 6px;
-	border-radius: var(--border-radius-base);
+.projectDetails {
+	display: flex;
+	align-items: center;
 }
 
 .actions {
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-end;
 	padding: var(--spacing-2xs) 0 var(--spacing-l);
 }
 </style>
diff --git a/packages/editor-ui/src/components/Projects/ProjectIcon.vue b/packages/editor-ui/src/components/Projects/ProjectIcon.vue
index 5365cba286..ae3c47b4e3 100644
--- a/packages/editor-ui/src/components/Projects/ProjectIcon.vue
+++ b/packages/editor-ui/src/components/Projects/ProjectIcon.vue
@@ -5,15 +5,23 @@ type Props = {
 	icon: ProjectIcon;
 	size?: 'small' | 'medium' | 'large';
 	round?: boolean;
+	borderLess?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
 	size: 'medium',
 	round: false,
+	borderLess: false,
 });
 </script>
 <template>
-	<div :class="[$style.container, $style[props.size], { [$style.round]: props.round }]">
+	<div
+		:class="[
+			$style.container,
+			$style[props.size],
+			{ [$style.round]: props.round, [$style.borderless]: props.borderLess },
+		]"
+	>
 		<N8nIcon
 			v-if="props.icon.type === 'icon'"
 			:icon="props.icon.value"
@@ -36,10 +44,14 @@ const props = withDefaults(defineProps<Props>(), {
 	&.round {
 		border-radius: 50%;
 	}
+
+	&.borderless {
+		border: none;
+	}
 }
 
 .small {
-	width: var(--spacing-l);
+	min-width: var(--spacing-l);
 	height: var(--spacing-l);
 
 	.emoji {
@@ -48,7 +60,7 @@ const props = withDefaults(defineProps<Props>(), {
 }
 
 .medium {
-	width: var(--spacing-xl);
+	min-width: var(--spacing-xl);
 	height: var(--spacing-xl);
 
 	.emoji {
@@ -58,7 +70,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 .large {
 	// Making this in line with user avatar size
-	width: 40px;
+	min-width: 40px;
 	height: 40px;
 
 	.emoji {