fix: fix ndv and dialog design

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

@@ -10,8 +10,13 @@
 	position: fixed;
 	top: 0;
 	left: 0;
-	padding: var(--spacing-2xl);
-	background-color: rgba(0, 0, 0, 0.5);
+	background-color: hsla(247deg, 14%, 30%, 0.75);
+}
+
+@include mixins.b(overlay-dialog) {
+	width: 100%;
+	height: 100%;
+	padding-top: var(--spacing-2xl);
 }
 
 @include mixins.b(dialog) {

packages/editor-ui/src/components/HoverableNodeIcon.vue

@@ -7,7 +7,7 @@
 		@mouseleave="showTooltip = false"
 	>
 		<div :class="$style.tooltip">
-			<n8n-tooltip placement="top" manual :value="showTooltip">
+			<n8n-tooltip placement="top" :visible="showTooltip">
 				<template #content>
 					<div v-text="nodeType.displayName"></div>
 				</template>

packages/editor-ui/src/components/InputPanel.vue

@@ -63,11 +63,7 @@
 				<n8n-text tag="div" :bold="true" color="text-dark" size="large">{{
 					$locale.baseText('ndv.input.noOutputData.title')
 				}}</n8n-text>
-				<n8n-tooltip
-					v-if="!readOnly"
-					:manual="true"
-					:value="showDraggableHint && showDraggableHintWithDelay"
-				>
+				<n8n-tooltip v-if="!readOnly" :visible="showDraggableHint && showDraggableHintWithDelay">
 					<template #content>
 						<div
 							v-html="

packages/editor-ui/src/components/NDVDraggablePanels.vue

@@ -305,6 +305,7 @@ export default defineComponent({
 			return px / this.windowWidth;
 		},
 		relativeWidthToPx(relativeWidth: number) {
+			console.log('relativeWidth', relativeWidth, this.windowWidth);
 			return relativeWidth * this.windowWidth;
 		},
 		onResizeStart() {

packages/editor-ui/src/components/Node.vue

@@ -70,8 +70,7 @@
 				<div class="node-trigger-tooltip__wrapper">
 					<n8n-tooltip
 						placement="top"
-						manual
-						:value="showTriggerNodeTooltip"
+						:visible="showTriggerNodeTooltip"
 						popper-class="node-trigger-tooltip__wrapper--item"
 					>
 						<template #content>
@@ -82,8 +81,7 @@
 					<n8n-tooltip
 						v-if="isTriggerNode"
 						placement="top"
-						manual
-						:value="pinDataDiscoveryTooltipVisible"
+						:visible="pinDataDiscoveryTooltipVisible"
 						popper-class="node-trigger-tooltip__wrapper--item"
 					>
 						<template #content>

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -4,15 +4,15 @@
 		:before-close="close"
 		:show-close="false"
 		class="data-display-wrapper ndv-wrapper"
+		overlay-class="data-display-overlay"
 		width="auto"
 		append-to-body
 		data-test-id="ndv"
 	>
 		<n8n-tooltip
 			placement="bottom-start"
-			:value="showTriggerWaitingWarning"
+			:visible="showTriggerWaitingWarning"
 			:disabled="!showTriggerWaitingWarning"
-			manual
 		>
 			<template #content>
 				<div :class="$style.triggerWarning">
@@ -698,9 +698,8 @@ export default defineComponent({
 }
 
 .data-display-wrapper {
-	height: 93%;
+	height: calc(100% - var(--spacing-2xl));
 	width: 100%;
-	margin-top: var(--spacing-xl) !important;
 	background: none;
 	border: none;
 

packages/editor-ui/src/components/ParameterInput.vue

@@ -197,7 +197,7 @@
 				ref="inputField"
 				type="datetime"
 				:size="inputSize"
-				:value="displayValue"
+				:modelValue="displayValue"
 				:title="displayTitle"
 				:disabled="isReadOnly"
 				:placeholder="
@@ -335,7 +335,7 @@
 				class="switch-input"
 				ref="inputField"
 				active-color="#13ce66"
-				:value="displayValue"
+				:modelValue="displayValue"
 				:disabled="isReadOnly"
 				@update:modelValue="valueChanged"
 			/>

packages/editor-ui/src/components/ParameterInputFull.vue

@@ -30,8 +30,7 @@
 			<template #default="{ droppable, activeDrop }">
 				<n8n-tooltip
 					placement="left"
-					:manual="true"
-					:value="showMappingTooltip"
+					:visible="showMappingTooltip"
 					:buttons="dataMappingTooltipButtons"
 				>
 					<template #content>

packages/editor-ui/src/components/RunData.vue

@@ -74,8 +74,11 @@
 					placement="bottom-end"
 					v-if="canPinData && jsonData && jsonData.length > 0"
 					v-show="!editMode.enabled"
-					:value="pinDataDiscoveryTooltipVisible"
-					:manual="isControlledPinDataTooltip"
+					:visible="
+						isControlledPinDataTooltip
+							? isControlledPinDataTooltip && pinDataDiscoveryTooltipVisible
+							: undefined
+					"
 				>
 					<template #content v-if="!isControlledPinDataTooltip">
 						<div :class="$style.tooltipContainer">

packages/editor-ui/src/views/CanvasAddButton.vue

@@ -7,8 +7,7 @@
 	>
 		<n8n-tooltip
 			placement="top"
-			:value="showTooltip"
-			manual
+			:visible="showTooltip"
 			:disabled="nodeCreatorStore.showScrim"
 			:popper-class="$style.tooltip"
 			:open-delay="700"