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

@@ -2,7 +2,11 @@
https://github.com/Nuked88/ComfyUI-N-Sidebar/blob/7ae7da4a9761009fb6629bc04c683087a3e168db/app/js/functions/sb_fn.js#L149
-->
<template>
<LGraphNodePreview v-if="shouldRenderVueNodes" :node-def="nodeDef" />
<LGraphNodePreview
v-if="shouldRenderVueNodes"
:node-def="nodeDef"
:position="position"
/>
<div v-else class="_sb_node_preview bg-component-node-background">
<div class="_sb_table">
<div
@@ -92,8 +96,9 @@ import { useWidgetStore } from '@/stores/widgetStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
import { renderMarkdownToHtml } from '@/utils/markdownRendererUtil'
const { nodeDef } = defineProps<{
const { nodeDef, position = 'absolute' } = defineProps<{
nodeDef: ComfyNodeDefV2
position?: 'absolute' | 'relative'
}>()
const { shouldRenderVueNodes } = useVueFeatureFlags()