fix: Fix all modal sizes (#6820)

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

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