From 38a50b7a3247a8129fd4d93e39babbdb2fb19500 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 02:55:54 +0200
Subject: [PATCH] fix: VOD duration badge overlapped the + Queue button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reported via screenshot against 4.6.44. The Twitch-style "32h37m9s"
duration pill introduced in 4.6.20 was anchored at bottom: 8px right:
8px inside .vod-card. But .vod-card is the WHOLE card — thumbnail
plus info + action buttons row below — so the badge sat at the
bottom-right of that whole stack, landing on top of the rightmost
action button ("+ Queue") and obscuring it. The user couldnt click
through the badge.

Fix wraps the .vod-thumbnail in a .vod-thumb-wrap div with
position:relative so the badge's absolute positioning anchors to
the thumbnail's bounding box. The badge now sits at the bottom-
right of the actual image, exactly where the Twitch convention
puts it.

.vod-thumb-wrap also gets line-height: 0 to kill the inline
baseline whitespace that would otherwise show as a thin gap
between the image and the .vod-info section below.

The storyboard hover preview overlay (renderer-vod-hover.ts) is
unaffected — it still appendChild's into .vod-card and uses
aspect-ratio: 16/9 to size itself, which matches the thumbnail
zone above the .vod-thumb-wrap container exactly. Verified end-to-
end pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-streamers.ts |  6 ++++--
 src/styles.css            | 15 ++++++++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index 7c9a22d..3079c36 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -256,8 +256,10 @@ function buildVodCardHtml(vod: VOD, streamer: string, downloadedIds?: Set<string
              data-vod-duration="${safeDurationAttr}">
             <input type="checkbox" class="vod-select-checkbox" data-vod-url="${safeUrlAttr}" ${isChecked ? 'checked' : ''} title="${escapeHtml(UI_TEXT.vods.bulkSelectedCount.replace('{count}', '0').replace(/[0-9]/g, '').trim() || 'Select')}" style="position:absolute; top:8px; left:8px; width:18px; height:18px; accent-color:#9146FF; cursor:pointer; z-index:2;">
             ${downloadedBadge}
-            <img class="vod-thumbnail" loading="lazy" decoding="async" src="${thumb}" alt="" title="${escapeHtml(UI_TEXT.vods.openOnTwitch)}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 180%22><rect fill=%22%23333%22 width=%22320%22 height=%22180%22/></svg>'">
-            <div class="vod-duration-badge">${escapeHtml(vod.duration)}</div>
+            <div class="vod-thumb-wrap">
+                <img class="vod-thumbnail" loading="lazy" decoding="async" src="${thumb}" alt="" title="${escapeHtml(UI_TEXT.vods.openOnTwitch)}" onerror="this.src='data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 320 180%22><rect fill=%22%23333%22 width=%22320%22 height=%22180%22/></svg>'">
+                <div class="vod-duration-badge">${escapeHtml(vod.duration)}</div>
+            </div>
             <div class="vod-info">
                 <div class="vod-title" title="${escapeHtml(vod.title || '')}">${safeDisplayTitle}</div>
                 <div class="vod-meta">
diff --git a/src/styles.css b/src/styles.css
index 5deaab0..248f751 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2969,7 +2969,20 @@ input[type="number"]::-webkit-outer-spin-button {
 
 /* ============================================
    VOD DURATION BADGE — Twitch-style pill on the thumbnail
-   ============================================ */
+   ============================================
+   Sits inside .vod-thumb-wrap so the absolute positioning anchors
+   to the thumbnail bounds, not the whole card (which would push
+   the badge past the action buttons at the bottom — regression
+   reported in 4.6.44 screenshot). */
+.vod-thumb-wrap {
+    position: relative;
+    line-height: 0;
+}
+
+.vod-thumb-wrap .vod-thumbnail {
+    display: block;
+}
+
 .vod-duration-badge {
     position: absolute;
     bottom: 8px;