From e6e6216b5d4e4bc24299599cebeaa5d43daa298a Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Thu, 10 Aug 2023 11:09:55 +0300
Subject: [PATCH] fix(editor): Fix post-migration CSS inconsistencies
 (no-changelog) (#6902)

* fix: fix node execute button spacing

* fix: minor css fixes

* fix: fix node-parameters-wrapper height
---
 .../design-system/src/components/N8nTooltip/Tooltip.vue     | 2 +-
 packages/design-system/src/css/index.scss                   | 2 +-
 packages/design-system/src/css/popper.scss                  | 5 +++++
 packages/design-system/src/css/tooltip.scss                 | 2 ++
 packages/editor-ui/src/components/NodeExecuteButton.vue     | 4 ++--
 packages/editor-ui/src/components/NodeSettings.vue          | 1 +
 packages/editor-ui/src/n8n-theme.scss                       | 4 ----
 packages/editor-ui/src/views/CanvasAddButton.vue            | 6 +-----
 8 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/design-system/src/components/N8nTooltip/Tooltip.vue b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
index a14e6fd482..ee8c53683a 100644
--- a/packages/design-system/src/components/N8nTooltip/Tooltip.vue
+++ b/packages/design-system/src/components/N8nTooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <template>
-	<el-tooltip v-bind="{ ...$props, ...$attrs }">
+	<el-tooltip v-bind="{ ...$props, ...$attrs }" popper-class="n8n-tooltip">
 		<slot />
 		<template #content>
 			<slot name="content">
diff --git a/packages/design-system/src/css/index.scss b/packages/design-system/src/css/index.scss
index 916ae11e05..ab30109386 100644
--- a/packages/design-system/src/css/index.scss
+++ b/packages/design-system/src/css/index.scss
@@ -30,7 +30,7 @@
 // @use "./time-select.scss";
 // @use "./time-picker.scss";
 @use './popover.scss';
-@use './tooltip.scss';
+//@use './tooltip.scss';
 @use './message-box.scss';
 // @use "./breadcrumb.scss";
 // @use "./breadcrumb-item.scss";
diff --git a/packages/design-system/src/css/popper.scss b/packages/design-system/src/css/popper.scss
index 2a63fe2229..09fdbe5581 100644
--- a/packages/design-system/src/css/popper.scss
+++ b/packages/design-system/src/css/popper.scss
@@ -150,3 +150,8 @@
 		}
 	}
 }
+
+.el-popper.n8n-tooltip {
+	max-width: 180px;
+	line-height: var(--font-line-height-regular) !important;
+}
diff --git a/packages/design-system/src/css/tooltip.scss b/packages/design-system/src/css/tooltip.scss
index 8cd12c3fcf..eef6d4d171 100644
--- a/packages/design-system/src/css/tooltip.scss
+++ b/packages/design-system/src/css/tooltip.scss
@@ -2,6 +2,8 @@
 @use './common/var';
 
 @include mixins.b(tooltip) {
+	max-width: 200px;
+
 	&:focus:not(.focusing),
 	&:focus:hover {
 		outline-width: 0;
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 62ad18cc14..ca1ae434b8 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -1,5 +1,5 @@
 <template>
-	<span>
+	<div>
 		<n8n-tooltip placement="bottom" :disabled="!disabledHint">
 			<template #content>
 				<div>{{ disabledHint }}</div>
@@ -17,7 +17,7 @@
 				/>
 			</div>
 		</n8n-tooltip>
-	</span>
+	</div>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 08b810c670..29c23ced64 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -1010,6 +1010,7 @@ export default defineComponent({
 	}
 
 	.node-parameters-wrapper {
+		min-height: 100%;
 		overflow-y: auto;
 		padding: 0 20px 200px 20px;
 	}
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index facafb98cb..1e5e13c225 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -224,7 +224,3 @@
 		}
 	}
 }
-
-.el-popper:not(.el-popover) {
-  max-width: 265px;
-}
diff --git a/packages/editor-ui/src/views/CanvasAddButton.vue b/packages/editor-ui/src/views/CanvasAddButton.vue
index a05ff89d82..25174fdc5f 100644
--- a/packages/editor-ui/src/views/CanvasAddButton.vue
+++ b/packages/editor-ui/src/views/CanvasAddButton.vue
@@ -16,7 +16,7 @@
 				<font-awesome-icon icon="plus" size="lg" />
 			</button>
 			<template #content>
-				<p v-text="$locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting')" />
+				{{ $locale.baseText('nodeView.canvasAddButton.addATriggerNodeBeforeExecuting') }}
 			</template>
 		</n8n-tooltip>
 		<p :class="$style.label" v-text="$locale.baseText('nodeView.canvasAddButton.addFirstStep')" />
@@ -81,10 +81,6 @@ const containerCssVars = computed(() => ({
 	}
 }
 
-:root .tooltip {
-	max-width: 180px;
-}
-
 .label {
 	width: max-content;
 	font-weight: var(--font-weight-bold);