From 7525cfe2dcd03e5050ffb32e8fef64132788d62e Mon Sep 17 00:00:00 2001
From: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
Date: Tue, 1 Aug 2023 13:52:33 +0200
Subject: [PATCH] fix: Fix all modal sizes (#6820)

---
 packages/design-system/src/css/dialog.scss    | 19 ++-----------------
 .../design-system/src/css/mixins/utils.scss   | 16 ++++++++++++++++
 packages/design-system/src/utils.scss         | 15 ---------------
 packages/editor-ui/src/components/Modal.vue   |  6 +++---
 .../src/components/NodeDetailsView.vue        |  2 +-
 packages/editor-ui/src/n8n-theme.scss         |  4 ----
 .../src/views/SettingsUsageAndPlan.vue        |  5 +++++
 7 files changed, 27 insertions(+), 40 deletions(-)

diff --git a/packages/design-system/src/css/dialog.scss b/packages/design-system/src/css/dialog.scss
index 69f99fa80e..a79af6998c 100644
--- a/packages/design-system/src/css/dialog.scss
+++ b/packages/design-system/src/css/dialog.scss
@@ -19,8 +19,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: inherit;
-	justify-content: center;
-	padding-top: var(--spacing-2xl);
+	overflow: auto;
 }
 
 @include mixins.b(overlay-message-box) {
@@ -38,7 +37,7 @@
 	border-radius: var(--border-radius-small);
 	box-shadow: var.$dialog-box-shadow;
 	box-sizing: border-box;
-	width: var(#{getCssVarName('dialog-width')}, 50%);
+	width: var(#{utils.getCssVarName('dialog-width')}, 50%);
 
 	@include mixins.when(fullscreen) {
 		width: 100%;
@@ -108,20 +107,6 @@
 			margin-left: var(--spacing-2xs);
 		}
 	}
-
-	// 内容居中布局
-	@include mixins.m(center) {
-		text-align: center;
-
-		@include mixins.e(body) {
-			text-align: initial;
-			padding: 25px (var.$dialog-padding-primary + 5px) 30px;
-		}
-
-		@include mixins.e(footer) {
-			text-align: inherit;
-		}
-	}
 }
 
 .dialog-fade-enter-active {
diff --git a/packages/design-system/src/css/mixins/utils.scss b/packages/design-system/src/css/mixins/utils.scss
index e86ede1e4a..cfb4cb42f9 100644
--- a/packages/design-system/src/css/mixins/utils.scss
+++ b/packages/design-system/src/css/mixins/utils.scss
@@ -37,3 +37,19 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
+
+@function joinVarName($list) {
+  $name: '--' + 'el';
+  @each $item in $list {
+    @if $item != '' {
+      $name: $name + '-' + $item;
+    }
+  }
+  @return $name;
+}
+
+// getCssVarName('button', 'text-color') => '--el-button-text-color'
+@function getCssVarName($args...) {
+  @return joinVarName($args);
+}
+
diff --git a/packages/design-system/src/utils.scss b/packages/design-system/src/utils.scss
index 7a951fe126..f81567d968 100644
--- a/packages/design-system/src/utils.scss
+++ b/packages/design-system/src/utils.scss
@@ -5,18 +5,3 @@
 @function saturation($h, $s, $l, $saturation) {
 	@return hsl(var(#{$h}), calc(var(#{$s}) + #{$saturation}), var(#{$l}));
 }
-
-@function joinVarName($list) {
-  $name: '--' + 'el';
-  @each $item in $list {
-    @if $item != '' {
-      $name: $name + '-' + $item;
-    }
-  }
-  @return $name;
-}
-
-// getCssVarName('button', 'text-color') => '--el-button-text-color'
-@function getCssVarName($args...) {
-  @return joinVarName($args);
-}
diff --git a/packages/editor-ui/src/components/Modal.vue b/packages/editor-ui/src/components/Modal.vue
index 8f90b4e072..86722b4e37 100644
--- a/packages/editor-ui/src/components/Modal.vue
+++ b/packages/editor-ui/src/components/Modal.vue
@@ -7,6 +7,7 @@
 			scrollable: scrollable,
 			[getCustomClass()]: true,
 		}"
+		:center="center"
 		:width="width"
 		:show-close="showClose"
 		:close-on-click-modal="closeOnClickModal"
@@ -14,6 +15,7 @@
 		:style="styles"
 		:append-to-body="appendToBody"
 		:data-test-id="`${this.name}-modal`"
+		:modal-class="center ? $style.center : ''"
 	>
 		<template #header v-if="$slots.header">
 			<slot name="header" v-if="!loading" />
@@ -235,9 +237,7 @@ export default defineComponent({
 </style>
 
 <style lang="scss" module>
-.center {
-	display: flex;
-	align-items: center;
+.center > div {
 	justify-content: center;
 }
 
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 16712d8dd8..0b496c2c1d 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -696,12 +696,12 @@ export default defineComponent({
 <style lang="scss">
 .ndv-wrapper {
 	overflow: visible;
-	padding-top: var(--spacing-2xs);
 	margin-top: 0;
 }
 
 .data-display-wrapper {
 	height: calc(100% - var(--spacing-2xl));
+	margin-top: var(--spacing-xl) !important;
 	width: 100%;
 	background: none;
 	border: none;
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 956b226fb2..facafb98cb 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -9,10 +9,6 @@
 	font-weight: 400;
 }
 
-.el-overlay-dialog {
-	justify-content: unset;
-}
-
 .el-dialog {
 	border: var(--border-base);
 	box-shadow: 0px 6px 16px rgb(68 28 23 / 6%);
diff --git a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
index 08d191d7d5..f6b70e389c 100644
--- a/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
+++ b/packages/editor-ui/src/views/SettingsUsageAndPlan.vue
@@ -209,6 +209,7 @@ const openPricingPage = () => {
 				@opened="onDialogOpened"
 				v-model="activationKeyModal"
 				:title="locale.baseText('settings.usageAndPlan.dialog.activation.title')"
+				:modal-class="$style.center"
 			>
 				<template #default>
 					<n8n-input
@@ -233,6 +234,10 @@ const openPricingPage = () => {
 <style lang="scss" module>
 @import '@/styles/css-animation-helpers.scss';
 
+.center > div {
+	justify-content: center;
+}
+
 .actionBox {
 	margin: var(--spacing-2xl) 0 0;
 }