From 631e07f7ae4a29bcd6748d3142b0e71e86fbe421 Mon Sep 17 00:00:00 2001
From: mariosemes <mario.semes@gmail.com>
Date: Thu, 26 Mar 2026 22:57:18 +0100
Subject: [PATCH] Fix thumbnail preview z-index by using fixed positioning

Preview now uses position:fixed with z-index 9999, positioned
dynamically via JS on mouseenter. No longer clipped by parent
overflow containers or table cells.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/client/src/app.css                     |  8 ++++----
 src/client/src/routes/results/+page.svelte | 12 +++++++++++-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/client/src/app.css b/src/client/src/app.css
index 47a682a..11fba66 100644
--- a/src/client/src/app.css
+++ b/src/client/src/app.css
@@ -61,10 +61,10 @@
   }
 }
 
-/* Thumbnail hover preview */
-.thumb-hover .thumb-preview {
-  @apply absolute left-full top-1/2 -translate-y-1/2 ml-3 z-50
-         opacity-0 scale-90 transition-all duration-150 ease-out;
+/* Thumbnail hover preview — positioned via JS */
+.thumb-preview {
+  @apply fixed z-[9999] pointer-events-none
+         opacity-0 scale-95 transition-all duration-150 ease-out;
 }
 
 .thumb-hover:hover .thumb-preview {
diff --git a/src/client/src/routes/results/+page.svelte b/src/client/src/routes/results/+page.svelte
index a49470d..ca97ac1 100644
--- a/src/client/src/routes/results/+page.svelte
+++ b/src/client/src/routes/results/+page.svelte
@@ -123,6 +123,16 @@
     excludedStores = next;
   }
 
+  function positionPreview(e) {
+    const thumb = e.currentTarget;
+    const preview = thumb.querySelector('.thumb-preview');
+    if (!preview) return;
+    const rect = thumb.getBoundingClientRect();
+    preview.style.left = `${rect.right + 12}px`;
+    preview.style.top = `${rect.top + rect.height / 2}px`;
+    preview.style.transform = 'translateY(-50%)';
+  }
+
   function formatPrice(price, currency) {
     if (price === null || price === undefined) return 'N/A';
     try { return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price); }
@@ -310,7 +320,7 @@
             <tr class="border-b border-surface-border hover:bg-surface-hover/50 transition-colors duration-100 group">
               <td class="px-6 py-2">
                 {#if product.image}
-                  <div class="relative thumb-hover">
+                  <div class="relative thumb-hover" onmouseenter={positionPreview}>
                     <div class="w-8 h-8 rounded bg-surface flex items-center justify-center overflow-hidden cursor-pointer">
                       <img src={product.image} alt="" class="max-w-full max-h-full object-contain" />
                     </div>