diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue index fb52d8c85b..edba96e05c 100644 --- a/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue +++ b/src/components/sidebar/tabs/nodeLibrary/NodeTreeLeaf.vue @@ -59,7 +59,7 @@
- +
@@ -132,11 +132,12 @@ function deleteBlueprint() { void useSubgraphStore().deleteBlueprint(props.node.data.name) } -const previewRef = ref | null>(null) const nodePreviewStyle = ref({ - position: 'absolute', + position: 'fixed', top: '0px', - left: '0px' + left: '0px', + pointerEvents: 'none', + zIndex: 1001 }) const handleNodeHover = async () => { @@ -144,19 +145,15 @@ const handleNodeHover = async () => { if (!hoverTarget) return const targetRect = hoverTarget.getBoundingClientRect() + const margin = 40 - const previewHeight = previewRef.value?.$el.offsetHeight || 0 - const availableSpaceBelow = window.innerHeight - targetRect.bottom - - nodePreviewStyle.value.top = - previewHeight > availableSpaceBelow - ? `${Math.max(0, targetRect.top - (previewHeight - availableSpaceBelow) - 20)}px` - : `${targetRect.top - 40}px` - if (sidebarLocation.value === 'left') { - nodePreviewStyle.value.left = `${targetRect.right}px` - } else { - nodePreviewStyle.value.left = `${targetRect.left - 400}px` - } + nodePreviewStyle.value.top = `${targetRect.top}px` + nodePreviewStyle.value.left = + sidebarLocation.value === 'left' + ? `${targetRect.right + margin}px` + : `${targetRect.left - margin}px` + nodePreviewStyle.value.transform = + sidebarLocation.value === 'right' ? 'translateX(-100%)' : undefined } const container = ref(null)