mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 05:32:02 +00:00
Tighter image sizing in vue mode (#8702)
Fixes multiple overlapping issues with both the ImagePreviews (LoadImage node) and LivePreview (Ksampler node) to eliminate empty space and move the bahviour to be closer to the litegraph implementation. - NodeWidgets will no longer no longer flex-grow when it contains no widgets capable of growing <img width="278" height="585" alt="image" src="https://github.com/user-attachments/assets/c4c39805-1474-457b-86d1-b64ecf01319f" /> - The number of element layers for LivePreview has been reduced. Sizing is difficult to properly spread across nested flex levels. - The ImagePreview and LivePreview now have `contain-size` set with a min height of 220 pixels (the same as the litegraph implementation). This allows images to "pillarbox" by increasing width without increasing height. | Before | After | | ------ | ----- | | <img width="360" alt="before" src="https://github.com/user-attachments/assets/3fe38a20-47d3-4a77-a0db-63167f76b0be"/> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/22dc6bf6-1812-49bb-95a1-3febfb3e40dd" />| | <img width="360" alt="before" src="https://github.com/user-attachments/assets/99b24547-6850-4b46-a972-53411676c78f" /> | <img width="360" alt="after" src="https://github.com/user-attachments/assets/0a7783c8-cf93-47aa-8c60-608b9a4b4498" />| ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8702-Tighter-image-sizing-in-vue-mode-2ff6d73d3650814196f0d55d81a42e2d) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Alexander Brown <drjkl@comfy.org>
This commit is contained in:
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user