Tighter image sizing in vue mode

src/renderer/extensions/vueNodes/components/ImagePreview.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="imageUrls.length > 0"
-    class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
+    class="image-preview group relative flex size-full min-h-55 min-w-16 flex-col px-2 justify-center"
     @keydown="handleKeyDown"
   >
     <!-- Image Wrapper -->
@@ -43,7 +43,7 @@
         ref="currentImageEl"
         :src="currentImageUrl"
         :alt="imageAltText"
-        class="block size-full object-contain pointer-events-none"
+        class="block size-full object-contain pointer-events-none contain-size"
         @load="handleImageLoad"
         @error="handleImageError"
       />

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -116,9 +116,10 @@
           <NodeContent :node-data="nodeData" :media="nodeMedia" />
         </div>
         <!-- Live mid-execution preview images -->
-        <div v-if="shouldShowPreviewImg" class="min-h-0 flex-1 px-4">
-          <LivePreview :image-url="latestPreviewUrl || null" />
-        </div>
+        <LivePreview
+          v-if="shouldShowPreviewImg"
+          :image-url="latestPreviewUrl"
+        />
 
         <!-- Show advanced inputs button for subgraph nodes -->
         <div v-if="showAdvancedInputsButton" class="flex justify-center px-3">

src/renderer/extensions/vueNodes/components/LivePreview.vue

@@ -1,46 +1,35 @@
 <template>
-  <div v-if="imageUrl" class="flex h-full min-h-16 w-full min-w-16 flex-col">
-    <!-- Image Container -->
+  <template v-if="imageUrl">
     <div
-      class="relative h-88 w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
+      v-if="imageError"
+      class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
     >
-      <!-- Error State -->
-      <div
-        v-if="imageError"
-        class="text-pure-white flex h-full w-full flex-col items-center justify-center text-center"
-      >
-        <i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
-        <p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
-      </div>
-
-      <!-- Main Image -->
-      <img
-        v-else
-        :src="imageUrl"
-        :alt="$t('g.liveSamplingPreview')"
-        class="pointer-events-none h-full w-full object-contain object-center"
-        @load="handleImageLoad"
-        @error="handleImageError"
-      />
+      <i-lucide:image-off class="mb-1 size-8 text-smoke-500" />
+      <p class="text-xs text-smoke-400">{{ $t('g.imageFailedToLoad') }}</p>
     </div>
-
-    <!-- Image Dimensions -->
+    <img
+      v-else
+      :src="imageUrl"
+      :alt="$t('g.liveSamplingPreview')"
+      class="pointer-events-none w-full object-contain contain-size min-h-55 flex-1"
+      @load="handleImageLoad"
+      @error="handleImageError"
+    />
     <div class="text-node-component-header-text mt-1 text-center text-xs">
       {{
         imageError
           ? $t('g.errorLoadingImage')
           : actualDimensions || $t('g.calculatingDimensions')
       }}
     </div>
-  </div>
+  </template>
 </template>
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 
 interface LivePreviewProps {
-  /** Image URL to display */
-  imageUrl: string | null
+  imageUrl: string
 }
 
 const props = defineProps<LivePreviewProps>()

src/renderer/extensions/vueNodes/components/NodeWidgets.vue

@@ -6,14 +6,15 @@
     v-else
     :class="
       cn(
-        'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] flex-1 gap-y-1 pr-3',
+        'lg-node-widgets grid grid-cols-[min-content_minmax(80px,max-content)_minmax(125px,auto)] gap-y-1 pr-3',
         shouldHandleNodePointerEvents
           ? 'pointer-events-auto'
           : 'pointer-events-none'
       )
     "
     :style="{
-      'grid-template-rows': gridTemplateRows
+      'grid-template-rows': gridTemplateRows,
+      flex: gridTemplateRows.includes('auto') ? 1 : undefined
     }"
     @pointerdown.capture="handleBringToFront"
     @pointerdown="handleWidgetPointerEvent"

src/renderer/extensions/vueNodes/preview/useNodePreviewState.ts

@@ -28,7 +28,7 @@ export const useNodePreviewState = (
 
   const latestPreviewUrl = computed(() => {
     const urls = previewUrls.value
-    return urls?.length ? urls.at(-1) : ''
+    return urls?.length ? urls.at(-1)! : ''
   })
 
   const shouldShowPreviewImg = computed(() => {