From 139b5b378daba6df18639eeb4f326edce7752e11 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 3 Mar 2025 13:31:47 +0100
Subject: [PATCH] fix(editor): Fix github star button layout (#13630)

---
 .../src/components/MainHeader/MainHeader.vue  | 58 +++++++++----------
 .../components/MainHeader/WorkflowDetails.vue |  1 +
 packages/frontend/editor-ui/src/constants.ts  |  1 +
 .../src/plugins/i18n/locales/en.json          |  2 +
 4 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
index b9ecc2fae9..967f93d71a 100644
--- a/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/MainHeader.vue
@@ -10,6 +10,7 @@ import {
 	STICKY_NODE_TYPE,
 	VIEWS,
 	WORKFLOW_EVALUATION_EXPERIMENT,
+	N8N_MAIN_GITHUB_REPO_URL,
 } from '@/constants';
 import { useExecutionsStore } from '@/stores/executions.store';
 import { useNDVStore } from '@/stores/ndv.store';
@@ -223,9 +224,11 @@ function hideGithubButton() {
 </script>
 
 <template>
-	<div class="container">
-		<div :class="{ 'main-header': true, expanded: !uiStore.sidebarMenuCollapsed }">
-			<div v-show="!hideMenuBar" class="top-menu">
+	<div :class="$style.container">
+		<div
+			:class="{ [$style['main-header']]: true, [$style.expanded]: !uiStore.sidebarMenuCollapsed }"
+		>
+			<div v-show="!hideMenuBar" :class="$style['top-menu']">
 				<WorkflowDetails
 					v-if="workflow?.name"
 					:id="workflow.id"
@@ -236,6 +239,25 @@ function hideGithubButton() {
 					:active="workflow.active"
 					:read-only="readOnly"
 				/>
+				<div v-if="showGitHubButton" :class="[$style['github-button'], 'hidden-sm-and-down']">
+					<div :class="$style['github-button-container']">
+						<GithubButton
+							:href="N8N_MAIN_GITHUB_REPO_URL"
+							:data-color-scheme="uiStore.appliedTheme"
+							data-size="large"
+							data-show-count="true"
+							:aria-label="locale.baseText('editor.mainHeader.githubButton.label')"
+						>
+							{{ locale.baseText('generic.star') }}
+						</GithubButton>
+						<N8nIcon
+							:class="$style['close-github-button']"
+							icon="times-circle"
+							size="medium"
+							@click="hideGithubButton"
+						/>
+					</div>
+				</div>
 			</div>
 			<TabBar
 				v-if="onWorkflowPage"
@@ -244,29 +266,10 @@ function hideGithubButton() {
 				@update:model-value="onTabSelected"
 			/>
 		</div>
-		<div v-if="showGitHubButton" class="github-button hidden-sm-and-down">
-			<div class="github-button-container">
-				<GithubButton
-					href="https://github.com/n8n-io/n8n"
-					:data-color-scheme="uiStore.appliedTheme"
-					data-size="large"
-					data-show-count="true"
-					aria-label="Star n8n-io/n8n on GitHub"
-				>
-					Star
-				</GithubButton>
-				<N8nIcon
-					class="close-github-button"
-					icon="times-circle"
-					size="medium"
-					@click="hideGithubButton"
-				/>
-			</div>
-		</div>
 	</div>
 </template>
 
-<style lang="scss">
+<style module lang="scss">
 .container {
 	display: flex;
 	position: relative;
@@ -288,22 +291,15 @@ function hideGithubButton() {
 	align-items: center;
 	font-size: 0.9em;
 	font-weight: 400;
-	padding: var(--spacing-xs) var(--spacing-m);
 	overflow: auto;
 }
 
 .github-button {
 	display: flex;
-	position: relative;
 	align-items: center;
 	align-self: stretch;
-	justify-content: center;
-	min-width: 170px;
-	padding-top: 2px;
-	padding-left: var(--spacing-m);
-	padding-right: var(--spacing-m);
+	padding: var(--spacing-5xs) var(--spacing-m) 0;
 	background-color: var(--color-background-xlight);
-	border-bottom: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 	border-left: var(--border-width-base) var(--border-style-base) var(--color-foreground-base);
 }
 
diff --git a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index d27d4708de..d749fc772b 100644
--- a/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/frontend/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -771,6 +771,7 @@ $--header-spacing: 20px;
 .container {
 	position: relative;
 	width: 100%;
+	padding: var(--spacing-xs) var(--spacing-m);
 	display: flex;
 	align-items: center;
 	flex-wrap: nowrap;
diff --git a/packages/frontend/editor-ui/src/constants.ts b/packages/frontend/editor-ui/src/constants.ts
index 48dac521c0..aefb6d574d 100644
--- a/packages/frontend/editor-ui/src/constants.ts
+++ b/packages/frontend/editor-ui/src/constants.ts
@@ -104,6 +104,7 @@ export const COMMUNITY_NODES_BLOCKLIST_DOCS_URL = `https://${DOCS_DOMAIN}/integr
 export const CUSTOM_NODES_DOCS_URL = `https://${DOCS_DOMAIN}/integrations/creating-nodes/code/create-n8n-nodes-module/`;
 export const EXPRESSIONS_DOCS_URL = `https://${DOCS_DOMAIN}/code-examples/expressions/`;
 export const N8N_PRICING_PAGE_URL = 'https://n8n.io/pricing';
+export const N8N_MAIN_GITHUB_REPO_URL = 'https://github.com/n8n-io/n8n';
 
 export const NODE_INSERT_SPACER_BETWEEN_INPUT_GROUPS = false;
 export const NODE_MIN_INPUT_ITEMS_COUNT = 4;
diff --git a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
index bdcf6c2419..7fa297d7aa 100644
--- a/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/frontend/editor-ui/src/plugins/i18n/locales/en.json
@@ -65,6 +65,7 @@
 	"generic.error": "Something went wrong",
 	"generic.settings": "Settings",
 	"generic.service": "the service",
+	"generic.star": "Star",
 	"generic.tryNow": "Try now",
 	"generic.dismiss": "Dismiss",
 	"generic.unsavedWork.confirmMessage.headline": "Save changes before leaving?",
@@ -675,6 +676,7 @@
 	"duplicateWorkflowDialog.errors.forbidden.title": "Duplicate workflow failed",
 	"duplicateWorkflowDialog.errors.forbidden.message": "This action is forbidden. Do you have the correct permissions?",
 	"duplicateWorkflowDialog.errors.generic.title": "Duplicate workflow failed",
+	"editor.mainHeader.githubButton.label": "Star n8n-io/n8n on GitHub",
 	"error": "Error",
 	"error.goBack": "Go back",
 	"error.pageNotFound": "Oops, couldn’t find that",