Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix sizing of image previews in vue mode (#6557)

Browse Source 
#6352 apparently introduced a regression in scaling for image previews

This PR fixes image scaling and, as a more opinionated change, makes the
image dimensions stay adjacent to the image
<img width="1283" height="668" alt="image"
src="https://github.com/user-attachments/assets/56fabe30-665f-45bb-9ed5-1c1bb79d7e54"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6557-Fix-sizing-of-image-previews-in-vue-mode-2a06d73d365081e4b2a1ebff7b42e9a8)
by [Unito](https://www.unito.io)

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
AustinMroz
2025-11-03 13:27:58 -08:00
committed by GitHub
parent befa84130b
commit f38255bff4
4 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
browser_tests/tests/vueNodes/widgets/load/uploadWidgets.spec.ts-snapshots/vue-nodes-upload-widgets-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 82 KiB

After

Width:  |  Height:  |  Size: 78 KiB

4
src/renderer/extensions/vueNodes/components/ImagePreview.vue
View File

@@ -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"
class="image-preview group relative flex size-full min-h-16 min-w-16 flex-col px-2 justify-center"
tabindex="0"
role="region"
:aria-label="$t('g.imagePreview')"
@@ -11,7 +11,7 @@
>
<!-- Image Wrapper -->
<div
class="relative h-88 w-full grow overflow-hidden rounded-[5px] bg-node-component-surface"
class="min-h-88 w-full overflow-hidden rounded-[5px] bg-node-component-surface"
>
<!-- Error State -->
<div

2
src/renderer/extensions/vueNodes/components/LGraphNode.vue
View File

@@ -107,7 +107,7 @@
<NodeWidgets v-if="nodeData.widgets?.length" :node-data="nodeData" />
<!-- Custom content at reduced+ detail -->
<div v-if="hasCustomContent" class="min-h-0 flex-1">
<div v-if="hasCustomContent" class="min-h-0 flex-1 flex">
<NodeContent :node-data="nodeData" :media="nodeMedia" />
</div>
<!-- Live mid-execution preview images -->

2
src/renderer/extensions/vueNodes/components/NodeContent.vue
View File

@@ -2,7 +2,7 @@
<div v-if="renderError" class="node-error p-2 text-sm text-red-500">
{{ $t('Node Content Error') }}
</div>
<div v-else class="lg-node-content flex h-full flex-col">
<div v-else class="lg-node-content flex grow flex-col">
<!-- Default slot for custom content -->
<slot>
<VideoPreview