fix(editor): Style regressions on Button (#25924)

packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue

@@ -209,7 +209,7 @@ const handleClick = (event: MouseEvent) => {
 		--button--height: 2.25rem;
 		--button--padding: 0 var(--spacing--sm);
 		--button--radius: var(--radius--xs);
-		--button--font-size: var(--font-size--md);
+		--button--font-size: var(--font-size--sm);
 	}
 
 	&.xlarge {
@@ -339,6 +339,10 @@ const handleClick = (event: MouseEvent) => {
 	&.iconOnly {
 		width: var(--button--height);
 		padding: 0;
+
+		> * {
+			width: var(--button--height);
+		}
 	}
 }
 

packages/frontend/editor-ui/src/app/components/DuplicateWorkflowDialog.vue

@@ -191,19 +191,17 @@ onMounted(async () => {
 		</template>
 		<template #footer="{ close }">
 			<div :class="$style.footer">
-				<N8nButton
-					:loading="isSaving"
-					:label="i18n.baseText('duplicateWorkflowDialog.save')"
-					float="right"
-					@click="save"
-				/>
 				<N8nButton
 					variant="subtle"
 					:disabled="isSaving"
 					:label="i18n.baseText('duplicateWorkflowDialog.cancel')"
-					float="right"
 					@click="close"
 				/>
+				<N8nButton
+					:loading="isSaving"
+					:label="i18n.baseText('duplicateWorkflowDialog.save')"
+					@click="save"
+				/>
 			</div>
 		</template>
 	</Modal>
@@ -217,6 +215,8 @@ onMounted(async () => {
 }
 
 .footer {
+	display: flex;
+	justify-content: flex-end;
 	> * {
 		margin-left: var(--spacing--3xs);
 	}

packages/frontend/editor-ui/src/app/components/ImportWorkflowUrlModal.vue

@@ -90,9 +90,9 @@ const focusInput = async () => {
 	visibility: hidden;
 }
 .footer {
-	> * {
-		margin-left: var(--spacing--3xs);
-	}
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing--2xs);
 }
 .noScrollbar {
 	overflow: hidden;

packages/frontend/editor-ui/src/app/views/NodeView.vue

@@ -1958,7 +1958,7 @@ onBeforeUnmount(() => {
 				<template v-if="containsChatTriggerNodes">
 					<CanvasChatButton
 						v-if="isLogsPanelOpen"
-						variant="ghost"
+						variant="subtle"
 						:label="i18n.baseText('chat.hide')"
 						:class="$style.chatButton"
 						@click="logsStore.toggleOpen(false)"
@@ -1969,7 +1969,7 @@ onBeforeUnmount(() => {
 						:shortcut="{ keys: ['c'] }"
 					>
 						<CanvasChatButton
-							:variant="isRunWorkflowButtonVisible ? 'outline' : 'solid'"
+							:variant="isRunWorkflowButtonVisible ? 'subtle' : 'solid'"
 							:label="i18n.baseText('chat.open')"
 							:class="$style.chatButton"
 							@click="onOpenChat"

packages/frontend/editor-ui/src/features/core/auth/views/MfaView.vue

@@ -239,7 +239,7 @@ onMounted(() => {
 					</N8nText>
 				</div>
 			</div>
-			<div>
+			<div :class="$style.footer">
 				<N8nButton
 					float="right"
 					:loading="verifyingMfaCode"
@@ -284,6 +284,12 @@ body {
 	padding-bottom: var(--spacing--xl);
 }
 
+.footer {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--spacing--2xs);
+}
+
 .headerContainer {
 	text-align: center;
 	margin-bottom: var(--spacing--xl);

packages/frontend/editor-ui/src/features/execution/insights/components/InsightsUpgradeModal.vue

@@ -40,7 +40,7 @@ const perks = computed(() =>
 			</ul>
 		</div>
 		<template #footer>
-			<div>
+			<div class="insight-modal-button-container">
 				<N8nButton variant="subtle" @click="model = false">
 					{{ i18n.baseText('insights.upgradeModal.button.dismiss') }}
 				</N8nButton>
@@ -67,4 +67,9 @@ const perks = computed(() =>
 		gap: var(--spacing--2xs);
 	}
 }
+.insight-modal-button-container {
+	display: flex;
+	justify-content: flex-end;
+	gap: var(--spacing--2xs);
+}
 </style>

packages/frontend/editor-ui/src/features/settings/communityNodes/components/CommunityPackageManageConfirmModal.vue

@@ -268,22 +268,22 @@ onMounted(async () => {
 			/>
 		</template>
 		<template #footer>
-			<N8nButton
-				variant="subtle"
-				:label="i18n.baseText('settings.communityNodes.confirmModal.cancel')"
-				size="large"
-				float="left"
-				data-test-id="close-button"
-				@click="onClick"
-			/>
-			<N8nButton
-				:loading="loading"
-				:disabled="loading"
-				:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
-				size="large"
-				float="right"
-				@click="onConfirmButtonClick"
-			/>
+			<div :class="$style.footerContainer">
+				<N8nButton
+					variant="subtle"
+					:label="i18n.baseText('settings.communityNodes.confirmModal.cancel')"
+					size="large"
+					data-test-id="close-button"
+					@click="onClick"
+				/>
+				<N8nButton
+					:loading="loading"
+					:disabled="loading"
+					:label="loading ? getModalContent.buttonLoadingLabel : getModalContent.buttonLabel"
+					size="large"
+					@click="onConfirmButtonClick"
+				/>
+			</div>
 		</template>
 	</Modal>
 </template>
@@ -295,6 +295,12 @@ onMounted(async () => {
 	flex-direction: column;
 }
 
+.footerContainer {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+
 .descriptionIcon {
 	align-self: center;
 	color: var(--color--text--tint-2);

packages/frontend/editor-ui/src/features/settings/sso/components/SSOLogin.vue

@@ -40,10 +40,15 @@ const onSSOLogin = async () => {
 
 <style lang="scss" module>
 .ssoLogin {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
 	text-align: center;
 }
 
 .divider {
+	width: 100%;
 	position: relative;
 	text-transform: uppercase;
 

packages/frontend/editor-ui/src/features/settings/usage/components/CommunityPlusEnrollmentModal.vue

@@ -193,8 +193,4 @@ const confirm = async () => {
 	justify-content: space-between;
 	align-items: center;
 }
-
-.skip {
-	padding: 0;
-}
 </style>

packages/frontend/editor-ui/src/features/settings/usage/views/SettingsUsageAndPlan.vue

@@ -332,12 +332,14 @@ const openCommunityRegisterModal = () => {
 					/>
 				</template>
 				<template #footer>
-					<N8nButton variant="subtle" @click="onActivationCancel">
-						{{ locale.baseText('settings.usageAndPlan.dialog.activation.cancel') }}
-					</N8nButton>
-					<N8nButton :disabled="!activationKey" @click="() => onLicenseActivation()">
-						{{ locale.baseText('settings.usageAndPlan.dialog.activation.activate') }}
-					</N8nButton>
+					<div :class="$style.dialogButtonsContainer">
+						<N8nButton variant="subtle" @click="onActivationCancel">
+							{{ locale.baseText('settings.usageAndPlan.dialog.activation.cancel') }}
+						</N8nButton>
+						<N8nButton :disabled="!activationKey" @click="() => onLicenseActivation()">
+							{{ locale.baseText('settings.usageAndPlan.dialog.activation.activate') }}
+						</N8nButton>
+					</div>
 				</template>
 			</ElDialog>
 
@@ -446,6 +448,11 @@ div[class*='info'] > span > span:last-child {
 	align-items: center;
 	margin: 0 0 0 var(--spacing--2xs);
 }
+
+.dialogButtonsContainer {
+	display: flex;
+	justify-content: flex-end;
+}
 </style>
 
 <style lang="scss" scoped>

packages/frontend/editor-ui/src/features/shared/tags/components/TagsManager/NoTagsView.vue

@@ -23,7 +23,7 @@ const i18n = useI18n();
 	<div :class="$style.container">
 		<ElCol class="notags" :span="16">
 			<div class="icon">🗄️</div>
-			<div>
+			<div :class="$style.content">
 				<div class="mb-s">
 					<N8nHeading size="large">
 						{{ i18n.baseText(titleLocaleKey) }}
@@ -32,12 +32,12 @@ const i18n = useI18n();
 				<div class="description">
 					{{ i18n.baseText(descriptionLocaleKey) }}
 				</div>
+				<N8nButton
+					:label="i18n.baseText(`${createLocaleKey}`)"
+					size="large"
+					@click="$emit('enableCreate')"
+				/>
 			</div>
-			<N8nButton
-				:label="i18n.baseText(`${createLocaleKey}`)"
-				size="large"
-				@click="$emit('enableCreate')"
-			/>
 		</ElCol>
 	</div>
 </template>
@@ -51,6 +51,16 @@ $--footer-spacing: 45px;
 	align-items: center;
 	margin-top: $--footer-spacing;
 }
+
+.content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+
+	> button {
+		margin-top: var(--spacing--md);
+	}
+}
 </style>
 
 <style lang="scss" scoped>

packages/frontend/editor-ui/src/features/shared/tags/components/TagsManager/TagsManager.vue

@@ -181,7 +181,12 @@ function onEnter() {
 			</ElRow>
 		</template>
 		<template #footer="{ close }">
-			<N8nButton :label="i18n.baseText('tagsManager.done')" float="right" @click="close" />
+			<N8nButton
+				variant="subtle"
+				:label="i18n.baseText('tagsManager.done')"
+				style="margin-left: auto"
+				@click="close"
+			/>
 		</template>
 	</Modal>
 </template>

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/CanvasRunWorkflowButton.vue

@@ -90,6 +90,7 @@ function getNodeTypeByName(name: string): INodeTypeDescription | null {
 				variant="solid"
 				:class="$style.button"
 				:loading="executing"
+				:iconOnly="executing"
 				:disabled="disabled"
 				:size="size ?? 'large'"
 				icon="flask-conical"

packages/frontend/editor-ui/src/features/workflows/canvas/components/elements/buttons/__snapshots__/CanvasRunWorkflowButton.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasRunWorkflowButton > should render correctly 1`] = `
-"<div class="component"><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub variant="solid" class="button" loading="false" disabled="false" size="large" icon="flask-conical" data-test-id="execute-workflow-button"><span class="buttonContent">Execute workflow <!--v-if--></span></n8n-button-stub></span>
+"<div class="component"><span class="" data-state="closed" data-grace-area-trigger=""><n8n-button-stub variant="solid" class="button" loading="false" icononly="false" disabled="false" size="large" icon="flask-conical" data-test-id="execute-workflow-button"><span class="buttonContent">Execute workflow <!--v-if--></span></n8n-button-stub></span>
   <!--v-if-->
   <!--v-if-->
 </div>"