From 798b0596ee6e8da44208f351d85b1f0639e9f9db Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Thu, 18 Dec 2025 08:07:06 +0100
Subject: [PATCH 1/4] fix: node preview Vue mode sizing in manager panel

Add lg-node-preview class to LGraphNodePreview for CSS targeting.
Override absolute positioning and apply zoom scaling to fit previews
within the manager info panel container.
---
 .../extensions/vueNodes/components/LGraphNodePreview.vue   | 2 +-
 .../components/manager/infoPanel/tabs/NodesTabPanel.vue    | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
index f4f6b1740a..056493b6f9 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNodePreview.vue
@@ -1,7 +1,7 @@
 <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="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 lg-node-preview"
   >
     <div
       class="flex flex-col justify-center items-center relative pointer-events-none"
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 64cb161459..b5a3a54613 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,12 @@
         :key="createNodeDefKey(nodeDef)"
         class="rounded-lg border p-4"
       >
-        <NodePreview :node-def="nodeDef" class="min-w-full! text-[.625rem]!" />
+        <div class="[&>.lg-node-preview]:relative" style="zoom: 0.5">
+          <NodePreview
+            :node-def="nodeDef"
+            class="min-w-full! text-[.625rem]!"
+          />
+        </div>
       </div>
     </template>
     <template v-else-if="isLoading">

From 95976eeb7940c7f882b8ac4773d27fe82a674aef Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Thu, 18 Dec 2025 08:21:46 +0100
Subject: [PATCH 2/4] fix: adjust node preview sizing in manager panel for
 better visibility

---
 .../components/manager/infoPanel/tabs/NodesTabPanel.vue       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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 b5a3a54613..a57b9de5ca 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,9 @@
         :key="createNodeDefKey(nodeDef)"
         class="rounded-lg border p-4"
       >
-        <div class="[&>.lg-node-preview]:relative" style="zoom: 0.5">
+        <div
+          class="[&>.lg-node-preview]:relative [&:has(>.lg-node-preview)]:[zoom:0.6]"
+        >
           <NodePreview
             :node-def="nodeDef"
             class="min-w-full! text-[.625rem]!"

From 78e54a2d0137bf7137cdfa5a564647a02839da41 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 19 Dec 2025 05:28:40 +0100
Subject: [PATCH 3/4] fix: enhance node preview component to support dynamic
 positioning

---
 src/components/node/NodePreview.vue                   |  9 +++++++--
 .../vueNodes/components/LGraphNodePreview.vue         | 11 +++++++++--
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/components/node/NodePreview.vue b/src/components/node/NodePreview.vue
index cb898e2739..107ee34713 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 056493b6f9..da7423850b 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 lg-node-preview"
+    :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()

From f0fd74359104c510d75e9163f453ca0e02427565 Mon Sep 17 00:00:00 2001
From: Johnpaul <polymenjohn1@gmail.com>
Date: Fri, 19 Dec 2025 05:38:01 +0100
Subject: [PATCH 4/4] fix: update NodePreview

---
 .../components/manager/infoPanel/tabs/NodesTabPanel.vue      | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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 a57b9de5ca..3f0c5db20e 100644
--- a/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
+++ b/src/workbench/extensions/manager/components/manager/infoPanel/tabs/NodesTabPanel.vue
@@ -6,11 +6,10 @@
         :key="createNodeDefKey(nodeDef)"
         class="rounded-lg border p-4"
       >
-        <div
-          class="[&>.lg-node-preview]:relative [&:has(>.lg-node-preview)]:[zoom:0.6]"
-        >
+        <div class="[zoom:0.6]">
           <NodePreview
             :node-def="nodeDef"
+            position="relative"
             class="min-w-full! text-[.625rem]!"
           />
         </div>