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

@@ -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 {

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>