fix: Fix all modal sizes (#6820)

packages/design-system/src/css/dialog.scss

@@ -19,8 +19,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: inherit;
-	justify-content: center;
+	overflow: auto;
-	padding-top: var(--spacing-2xl);
 }
 
 @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 {

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);
+}
+

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);
-}

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 {
+.center > div {
-	display: flex;
-	align-items: center;
 	justify-content: center;
 }
 

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;

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%);

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;
 }