fix(editor): Make sure connectors are clickable when overlapped by node description (#16765)

packages/frontend/editor-ui/src/components/canvas/elements/handles/render-types/parts/CanvasHandlePlus.vue

@@ -25,6 +25,7 @@ const emit = defineEmits<{
 const style = useCssModule();
 
 const classes = computed(() => [
+	'canvas-handle-plus-wrapper',
 	style.wrapper,
 	style[props.position],
 	style[props.type],

packages/frontend/editor-ui/src/components/canvas/elements/handles/render-types/parts/__snapshots__/CanvasHandlePlus.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CanvasHandlePlus > should render with default props 1`] = `
-"<svg data-test-id="canvas-handle-plus-wrapper" class="wrapper right default" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
+"<svg data-test-id="canvas-handle-plus-wrapper" class="canvas-handle-plus-wrapper wrapper right default" viewBox="0 0 70 24" style="width: 70px; height: 24px;">
   <line class="line" x1="0" y1="12" x2="47" y2="12" stroke="var(--color-foreground-xdark)" stroke-width="2"></line>
   <g data-test-id="canvas-handle-plus" class="plus clickable" transform="translate(46, 0)">
     <rect class="clickable" x="2" y="2" width="20" height="20" stroke="var(--color-foreground-xdark)" stroke-width="2" rx="4" fill="var(--color-foreground-xlight)"></rect>

packages/frontend/editor-ui/src/components/canvas/elements/nodes/render-types/CanvasNodeDefault.vue

@@ -313,6 +313,7 @@ function onActivate(event: MouseEvent) {
 	display: flex;
 	flex-direction: column;
 	gap: var(--spacing-4xs);
+	pointer-events: none;
 }
 
 .label,

packages/frontend/editor-ui/src/styles/plugins/_vueflow.scss

@@ -79,6 +79,11 @@
 	&:has(.sticky--active) {
 		z-index: 1 !important;
 	}
+
+	// Bump z-index for unconnected nodes
+	&:has(.canvas-handle-plus-wrapper):hover {
+		z-index: 2 !important;
+	}
 }
 
 .vue-flow__nodes:has(.bring-to-front) {