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 @@ {#if product.image} -
+