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)