Make entire result image preview clickable (#3279)

Co-authored-by: Benjamin Lu <templu1107@proton.me>

src/components/sidebar/tabs/queue/ResultItem.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="result-container" ref="resultContainer">
+  <div
+    class="result-container"
+    ref="resultContainer"
+    @click="handlePreviewClick"
+  >
     <ComfyImage
       v-if="result.isImage"
       :src="result.url"
@@ -12,20 +16,10 @@
       <i class="pi pi-file"></i>
       <span>{{ result.mediaType }}</span>
     </div>
-
-    <div v-if="result.supportsPreview" class="preview-mask">
-      <Button
-        icon="pi pi-eye"
-        severity="secondary"
-        @click="emit('preview', result)"
-        rounded
-      />
-    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import { computed, onMounted, ref } from 'vue'
 
 import ComfyImage from '@/components/common/ComfyImage.vue'
@@ -48,6 +42,12 @@ const imageFit = computed<string>(() =>
   settingStore.get('Comfy.Queue.ImageFit')
 )
 
+const handlePreviewClick = () => {
+  if (props.result.supportsPreview) {
+    emit('preview', props.result)
+  }
+}
+
 onMounted(() => {
   if (props.result.mediaType === 'images') {
     resultContainer.value?.querySelectorAll('img').forEach((img) => {
@@ -67,22 +67,11 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
 }
 
-.preview-mask {
+.result-container:hover {
-  position: absolute;
+  transform: scale(1.02);
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  z-index: 1;
-}
-
-.result-container:hover .preview-mask {
-  opacity: 1;
 }
 </style>

src/components/sidebar/tabs/queue/TaskItem.vue

@@ -231,6 +231,13 @@ const cancelledWithoutResults = computed(() => {
   align-items: center;
   width: 100%;
   z-index: 1;
+  pointer-events: none; /* Allow clicks to pass through this div */
+}
+
+/* Make individual controls clickable again by restoring pointer events */
+.task-item-details .tag-wrapper,
+.task-item-details button {
+  pointer-events: auto;
 }
 
 .task-node-link {