feat(editor): Update styling of embedded NDV (no-changelog) (#17366)

packages/frontend/editor-ui/src/components/canvas/Canvas.vue

@@ -179,9 +179,12 @@ const experimentalNdvStore = useExperimentalNdvStore();
 
 const isPaneReady = ref(false);
 
+const isExperimentalNdvActive = computed(() => experimentalNdvStore.isActive(viewport.value.zoom));
+
 const classes = computed(() => ({
 	[$style.canvas]: true,
 	[$style.ready]: !props.loading && isPaneReady.value,
+	[$style.isExperimentalNdvActive]: isExperimentalNdvActive.value,
 }));
 
 /**
@@ -844,6 +847,7 @@ provide(CanvasKey, {
 	isExecuting,
 	initialized,
 	viewport,
+	isExperimentalNdvActive,
 });
 </script>
 
@@ -892,6 +896,7 @@ provide(CanvasKey, {
 					:event-bus="eventBus"
 					:hovered="nodesHoveredById[nodeProps.id]"
 					:nearby-hovered="nodeProps.id === hoveredTriggerNode.id.value"
+					:is-experimental-ndv-active="isExperimentalNdvActive"
 					@delete="onDeleteNode"
 					@run="onRunNode"
 					@select="onSelectNode"
@@ -957,6 +962,7 @@ provide(CanvasKey, {
 			:show-interactive="false"
 			:zoom="viewport.zoom"
 			:read-only="readOnly"
+			:is-experimental-ndv-active="isExperimentalNdvActive"
 			@zoom-to-fit="onFitView"
 			@zoom-in="onZoomIn"
 			@zoom-out="onZoomOut"
@@ -992,6 +998,10 @@ provide(CanvasKey, {
 			cursor: grabbing;
 		}
 	}
+
+	&.isExperimentalNdvActive {
+		--canvas-zoom-compensation-factor: 0.67;
+	}
 }
 </style>