msemes/PriceHunter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix thumbnail preview z-index by using fixed positioning

Browse Source 
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>
This commit is contained in:
mariosemes
2026-03-26 22:57:18 +01:00
parent f47e019427
commit 631e07f7ae
2 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/client/src/app.css
View File

@@ -61,10 +61,10 @@
} }
} }
/* Thumbnail hover preview */ /* Thumbnail hover preview — positioned via JS */
.thumb-hover .thumb-preview { .thumb-preview {
@apply absolute left-full top-1/2 -translate-y-1/2 ml-3 z-50 @apply fixed z-[9999] pointer-events-none
opacity-0 scale-90 transition-all duration-150 ease-out; opacity-0 scale-95 transition-all duration-150 ease-out;
} }
.thumb-hover:hover .thumb-preview { .thumb-hover:hover .thumb-preview {

12
src/client/src/routes/results/+page.svelte
View File

@@ -123,6 +123,16 @@
excludedStores = next; 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) { function formatPrice(price, currency) {
if (price === null || price === undefined) return 'N/A'; if (price === null || price === undefined) return 'N/A';
try { return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(price); } 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"> <tr class="border-b border-surface-border hover:bg-surface-hover/50 transition-colors duration-100 group">
<td class="px-6 py-2"> <td class="px-6 py-2">
{#if product.image} {#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"> <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" /> <img src={product.image} alt="" class="max-w-full max-h-full object-contain" />
</div> </div>