fix: node preview Vue mode sizing in manager panel (#7611)

## Summary
- Add `lg-node-preview` class to LGraphNodePreview for CSS targeting
- Override absolute positioning in NodesTabPanel to make Vue mode
previews fit within the container
- Apply zoom scaling (0.5) to fit node previews in the manager info
panel

## Test plan
- [ ] Open manager panel and select a node pack with nodes
- [ ] Verify node previews display correctly with Vue mode enabled
- [ ] Verify previews fit within the panel bounds without overflow

## Before


https://github.com/user-attachments/assets/8cd3a201-600d-4f31-9b79-4a480a07d998



## After



https://github.com/user-attachments/assets/b88ee7f2-5e6d-4913-b5a6-fa5fbe3b4dde





┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7611-fix-node-preview-Vue-mode-sizing-in-manager-panel-2cd6d73d36508141843cea046f104746)
by [Unito](https://www.unito.io)
This commit is contained in:
Johnpaul Chiwetelu
2025-12-19 08:32:58 +01:00
committed by GitHub
parent 2724840fea
commit b598ce2c0f
3 changed files with 23 additions and 5 deletions

View File

@@ -6,7 +6,13 @@
:key="createNodeDefKey(nodeDef)"
class="rounded-lg border p-4"
>
<NodePreview :node-def="nodeDef" class="min-w-full! text-[.625rem]!" />
<div class="[zoom:0.6]">
<NodePreview
:node-def="nodeDef"
position="relative"
class="min-w-full! text-[.625rem]!"
/>
</div>
</div>
</template>
<template v-else-if="isLoading">