From 6a1da7a7afbda0f1be1d274d449e3fadbb7931cc Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Fri, 9 Jan 2026 16:02:32 -0500
Subject: [PATCH] fix: image compare height mismatch between before and after
 images (#7931)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Add relative and size-full classes to the inner container div to ensure
both images share the same positioning context and size constraints.

fix https://github.com/Comfy-Org/ComfyUI_frontend/issues/7928

## Screenshots (if applicable)
before
<img width="666" height="369" alt="image"
src="https://github.com/user-attachments/assets/2118685c-412a-4689-aac4-c0e592e47678"
/>

after
<img width="500" height="505" alt="image"
src="https://github.com/user-attachments/assets/c773147a-a28a-4145-a26a-6f19dafad50f"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7931-fix-image-compare-height-mismatch-between-before-and-after-images-2e36d73d365081b69b49dfdd63d242a9)
by [Unito](https://www.unito.io)
---
 .../vueNodes/widgets/components/WidgetImageCompare.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
index 8cb80341a..65271a215 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetImageCompare.vue
@@ -1,6 +1,6 @@
 <template>
   <div ref="containerRef" class="relative size-full min-h-32 overflow-hidden">
-    <div v-if="beforeImage || afterImage">
+    <div v-if="beforeImage || afterImage" class="relative size-full">
       <img
         v-if="afterImage"
         :src="afterImage"