From b598ce2c0f52a323079a54bfcac701400c9a2d9b Mon Sep 17 00:00:00 2001
From: Johnpaul Chiwetelu <49923152+Myestery@users.noreply.github.com>
Date: Fri, 19 Dec 2025 08:32:58 +0100
Subject: [PATCH] fix: node preview Vue mode sizing in manager panel (#7611)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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)
---
 src/components/node/NodePreview.vue                   |  9 +++++++--
 .../vueNodes/components/LGraphNodePreview.vue         | 11 +++++++++--
 .../manager/infoPanel/tabs/NodesTabPanel.vue          |  8 +++++++-
 3 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index cb898e273..107ee3471 100644
--- a/src/components/node/NodePreview.vue
+++ b/src/components/node/NodePreview.vue
@@ -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()
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index f4f6b1740..da7423850 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -1,7 +1,12 @@
 <template>
   <div
     :data-node-id="nodeData.id"
-    class="bg-component-node-background lg-node absolute pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke"
+    :class="
+      cn(
+        'bg-component-node-background lg-node pb-1 contain-style contain-layout w-[350px] rounded-2xl touch-none flex flex-col border-1 border-solid outline-transparent outline-2 border-node-stroke',
+        position
+      )
+    "
   >
     <div
       class="flex flex-col justify-center items-center relative pointer-events-none"
@@ -37,9 +42,11 @@ import NodeSlots from '@/renderer/extensions/vueNodes/components/NodeSlots.vue'
 import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
 import type { ComfyNodeDef as ComfyNodeDefV2 } from '@/schemas/nodeDef/nodeDefSchemaV2'
 import { useWidgetStore } from '@/stores/widgetStore'
+import { cn } from '@/utils/tailwindUtil'
 
-const { nodeDef } = defineProps<{
+const { nodeDef, position = 'absolute' } = defineProps<{
   nodeDef: ComfyNodeDefV2
+  position?: 'absolute' | 'relative'
 }>()
 
 const widgetStore = useWidgetStore()
diff --git a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
index 64cb16145..3f0c5db20 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
@@ -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">