From a5a1d8c067e9b468f09f09dc0894e8931ab19413 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Wed, 13 May 2026 14:44:39 +0200
Subject: [PATCH] =?UTF-8?q?release:=205.0.3=20=E2=80=94=20VOD=20hover=20ov?=
 =?UTF-8?q?erlay=20fuellt=20jetzt=20das=20gesamte=20Thumbnail-Wrap?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wechsel von explicit width/height auf inset:0 (top/right/bottom/left:0,
width/height:auto, aspect-ratio:auto override des CSS-Legacy 16/9). Damit
fuellt das Overlay garantiert das gesamte .vod-thumb-wrap — kein leerer
Streifen mehr am oberen oder unteren Rand der Hover-Vorschau, egal ob
Twitch Storyboard-Cell-Aspect oder Subpixel-Rendering minimal abweicht.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 package-lock.json         |  4 ++--
 package.json              |  2 +-
 src/renderer-vod-hover.ts | 36 +++++++++++++++++++++---------------
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cb94d04..ac6624b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "5.0.2",
+      "version": "5.0.3",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",
diff --git a/package.json b/package.json
index 7481202..694295e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "5.0.2",
+  "version": "5.0.3",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",
diff --git a/src/renderer-vod-hover.ts b/src/renderer-vod-hover.ts
index 3543da0..e83e987 100644
--- a/src/renderer-vod-hover.ts
+++ b/src/renderer-vod-hover.ts
@@ -125,29 +125,35 @@ async function activateHoverPreview(card: HTMLElement, vodId: string): Promise<v
     const overlay = document.createElement('div');
     overlay.className = 'vod-storyboard-preview';
 
-    // Anchor an .vod-thumb-wrap statt .vod-card: das wrap-Element hat
+    // Anchor an .vod-thumb-wrap statt .vod-card. Das wrap-Element hat
     // exakt Thumbnail-Bounds (kein card-border, kein info/actions-Bereich
-    // darunter). Faellt zurueck auf das card selbst, falls das Markup
-    // mal anders ist.
+    // darunter). Faellt zurueck auf das card selbst falls Markup anders.
     const anchor = card.querySelector('.vod-thumb-wrap') as HTMLElement | null;
     const host = anchor ?? card;
-    const thumb = card.querySelector('.vod-thumbnail') as HTMLElement | null;
-    const thumbRect = (thumb ?? host).getBoundingClientRect();
-    const width = thumbRect.width;
-    const height = thumbRect.height;
+    const hostRect = host.getBoundingClientRect();
 
-    // Skaliere X und Y unabhaengig, damit eine Cell EXAKT die Overlay-Box
+    // inset: 0 statt explicit width/height — Overlay fuellt garantiert das
+    // gesamte Host-Element. Vermeidet Subpixel-Spalten am oberen oder
+    // unteren Rand wenn JS-measured Dimensions minimal von der CSS-aspect-
+    // ratio-Reserve abweichen.
+    overlay.style.top = '0';
+    overlay.style.right = '0';
+    overlay.style.bottom = '0';
+    overlay.style.left = '0';
+    overlay.style.width = 'auto';
+    overlay.style.height = 'auto';
+    // CSS hat noch aspect-ratio: 16/9 als Legacy-Fallback — wir setzen
+    // hier explizit auto, sodass inset:0 die Box-Groesse bestimmt.
+    overlay.style.aspectRatio = 'auto';
+
+    // Skaliere X und Y unabhaengig, damit eine Cell die Overlay-Box exakt
     // fuellt — egal ob Twitch-Cell-Aspect (z.B. 320x180) gleich Thumbnail-
-    // Aspect (CSS 16/9) ist oder leicht abweicht. Ohne separate Y-Skalierung
-    // gab es bei minimalem Aspect-Diff einen Pixel-Streifen mit Inhalt aus
-    // row+1 (oder row-1, je nach Vorzeichen) am Rand des Overlays.
-    const scaleX = width / storyboard.cellWidth;
-    const scaleY = height / storyboard.cellHeight;
+    // Aspect (CSS 16/9) ist oder leicht abweicht.
+    const scaleX = hostRect.width / storyboard.cellWidth;
+    const scaleY = hostRect.height / storyboard.cellHeight;
     overlay.style.backgroundImage = `url("${storyboard.spriteDataUrl.replace(/"/g, '%22')}")`;
     overlay.style.backgroundSize = `${storyboard.cols * storyboard.cellWidth * scaleX}px ${storyboard.rows * storyboard.cellHeight * scaleY}px`;
     overlay.style.backgroundRepeat = 'no-repeat';
-    overlay.style.width = `${width}px`;
-    overlay.style.height = `${height}px`;
     // Initial position = first chosen cell.
     const first = cellsToShow[0];
     overlay.style.backgroundPosition = `-${first.col * storyboard.cellWidth * scaleX}px -${first.row * storyboard.cellHeight * scaleY}px`;