From d1b8cad16ffe426c733871a5ff263d075af373aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Wed, 17 Sep 2025 14:15:20 +0200
Subject: [PATCH] fix(editor): Fix alignment in Workflow Settings modal
 (no-changelog) (#19645)

---
 .../src/components/WorkflowSettings.vue       | 66 ++++++++++++-------
 1 file changed, 42 insertions(+), 24 deletions(-)

diff --git a/packages/frontend/editor-ui/src/components/WorkflowSettings.vue b/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
index 542892129a..8257b95c39 100644
--- a/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/frontend/editor-ui/src/components/WorkflowSettings.vue
@@ -496,9 +496,13 @@ onBeforeUnmount(() => {
 		:scrollable="true"
 	>
 		<template #content>
-			<div v-loading="isLoading" class="workflow-settings" data-test-id="workflow-settings-dialog">
+			<div
+				v-loading="isLoading"
+				:class="$style['workflow-settings']"
+				data-test-id="workflow-settings-dialog"
+			>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.executionOrder') }}
 					</el-col>
 					<el-col :span="14" class="ignore-key-press-canvas">
@@ -523,7 +527,7 @@ onBeforeUnmount(() => {
 				</el-row>
 
 				<el-row data-test-id="error-workflow">
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.errorWorkflow') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -556,7 +560,7 @@ onBeforeUnmount(() => {
 				</el-row>
 				<div v-if="isSharingEnabled" data-test-id="workflow-caller-policy">
 					<el-row>
-						<el-col :span="10" class="setting-name">
+						<el-col :span="10" :class="$style['setting-name']">
 							{{ i18n.baseText('workflowSettings.callerPolicy') }}
 							<N8nTooltip placement="top">
 								<template #content>
@@ -585,7 +589,7 @@ onBeforeUnmount(() => {
 						</el-col>
 					</el-row>
 					<el-row v-if="workflowSettings.callerPolicy === 'workflowsFromAList'">
-						<el-col :span="10" class="setting-name">
+						<el-col :span="10" :class="$style['setting-name']">
 							{{ i18n.baseText('workflowSettings.callerIds') }}
 							<N8nTooltip placement="top">
 								<template #content>
@@ -607,7 +611,7 @@ onBeforeUnmount(() => {
 					</el-row>
 				</div>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.timezone') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -636,7 +640,7 @@ onBeforeUnmount(() => {
 					</el-col>
 				</el-row>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.saveDataErrorExecution') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -665,7 +669,7 @@ onBeforeUnmount(() => {
 					</el-col>
 				</el-row>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.saveDataSuccessExecution') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -694,7 +698,7 @@ onBeforeUnmount(() => {
 					</el-col>
 				</el-row>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.saveManualExecutions') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -723,7 +727,7 @@ onBeforeUnmount(() => {
 					</el-col>
 				</el-row>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.saveExecutionProgress') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -752,7 +756,7 @@ onBeforeUnmount(() => {
 					</el-col>
 				</el-row>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						{{ i18n.baseText('workflowSettings.timeoutWorkflow') }}
 						<N8nTooltip placement="top">
 							<template #content>
@@ -779,7 +783,7 @@ onBeforeUnmount(() => {
 					data-test-id="workflow-settings-timeout-form"
 				>
 					<el-row>
-						<el-col :span="10" class="setting-name">
+						<el-col :span="10" :class="$style['setting-name']">
 							{{ i18n.baseText('workflowSettings.timeoutAfter') }}
 							<N8nTooltip placement="top">
 								<template #content>
@@ -798,7 +802,7 @@ onBeforeUnmount(() => {
 								<template #append>{{ i18n.baseText('workflowSettings.hours') }}</template>
 							</N8nInput>
 						</el-col>
-						<el-col :span="4" class="timeout-input">
+						<el-col :span="4" :class="$style['timeout-input']">
 							<N8nInput
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:model-value="timeoutHMS.minutes"
@@ -809,7 +813,7 @@ onBeforeUnmount(() => {
 								<template #append>{{ i18n.baseText('workflowSettings.minutes') }}</template>
 							</N8nInput>
 						</el-col>
-						<el-col :span="4" class="timeout-input">
+						<el-col :span="4" :class="$style['timeout-input']">
 							<N8nInput
 								:disabled="readOnlyEnv || !workflowPermissions.update"
 								:model-value="timeoutHMS.seconds"
@@ -823,7 +827,7 @@ onBeforeUnmount(() => {
 					</el-row>
 				</div>
 				<el-row>
-					<el-col :span="10" class="setting-name">
+					<el-col :span="10" :class="$style['setting-name']">
 						<label for="timeSavedPerExecution">
 							{{ i18n.baseText('workflowSettings.timeSavedPerExecution') }}
 							<N8nTooltip placement="top">
@@ -835,7 +839,7 @@ onBeforeUnmount(() => {
 						</label>
 					</el-col>
 					<el-col :span="14">
-						<div class="time-saved">
+						<div :class="$style['time-saved']">
 							<N8nInput
 								id="timeSavedPerExecution"
 								v-model="workflowSettings.timeSavedPerExecution"
@@ -852,7 +856,7 @@ onBeforeUnmount(() => {
 			</div>
 		</template>
 		<template #footer>
-			<div class="action-buttons" data-test-id="workflow-settings-save-button">
+			<div :class="$style['action-buttons']" data-test-id="workflow-settings-save-button">
 				<N8nButton
 					:disabled="readOnlyEnv || !workflowPermissions.update"
 					:label="i18n.baseText('workflowSettings.save')"
@@ -865,16 +869,30 @@ onBeforeUnmount(() => {
 	</Modal>
 </template>
 
-<style scoped lang="scss">
+<style module lang="scss">
 .workflow-settings {
 	font-size: var(--font-size-s);
-	.el-row {
-		padding: 0.25em 0;
+	display: flex;
+	flex-direction: column;
+	gap: var(--spacing-3xs);
+
+	:global(.el-row) {
+		display: flex;
+		align-items: center;
+	}
+
+	:global(.el-switch) {
+		padding: var(--spacing-m) 0;
 	}
 }
 
 .setting-name {
-	line-height: 32px;
+	&,
+	& label {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-4xs);
+	}
 
 	svg {
 		display: inline-flex;
@@ -890,15 +908,15 @@ onBeforeUnmount(() => {
 }
 
 .timeout-input {
-	margin-left: 5px;
+	margin-left: var(--spacing-3xs);
 }
 
 .time-saved {
 	display: flex;
 	align-items: center;
 
-	:deep(.el-input) {
-		width: 64px;
+	:global(.el-input) {
+		width: var(--spacing-3xl);
 	}
 
 	span {