From bbdcf8f71ce43f5727c9d161a264e6ac959e1627 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 05:43:47 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20extract=20.vod-filter-row=20CSS=20cl?=
 =?UTF-8?q?ass=20=E2=80=94=20kill=203=20inline=20style=20attrs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The filter row above the VOD grid carried three inline style attributes:
- the row's own flex layout (display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap)
- vodSortLabel had margin-left:8px (extra spacing past the row's gap to visually group "Sort:" with the select)
- vodFilterCount had min-width:80px (prevents layout shift as count text changes during typing)

All three are now CSS class definitions (.vod-filter-row, .vod-sort-label, .vod-filter-count). HTML reads cleaner and the styling lives alongside the related .vod-bulk-bar block in styles.css.

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

diff --git a/src/index.html b/src/index.html
index 9dc63f5..69001db 100644
--- a/src/index.html
+++ b/src/index.html
@@ -261,10 +261,10 @@
                 <!-- VODs Tab -->
                 <div class="tab-content active" id="vodsTab">
                     <div id="streamerProfileHeader" class="streamer-profile-header" style="display:none;"></div>
-                    <div class="vod-filter-row" style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
+                    <div class="vod-filter-row">
                         <input type="text" id="vodFilterInput" class="filter-input" placeholder="Filter VODs..." oninput="onVodFilterInput()">
                         <button id="vodFilterClearBtn" class="btn-close" onclick="clearVodFilter()" title="Clear filter" style="display:none;">x</button>
-                        <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel" style="margin-left:8px;">Sort:</label>
+                        <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel vod-sort-label">Sort:</label>
                         <select id="vodSortSelect" class="select-compact" onchange="onVodSortChange()">
                             <option value="date_desc">Newest first</option>
                             <option value="date_asc">Oldest first</option>
@@ -272,7 +272,7 @@
                             <option value="duration_desc">Longest first</option>
                             <option value="duration_asc">Shortest first</option>
                         </select>
-                        <span id="vodFilterCount" class="form-sublabel" style="min-width:80px;"></span>
+                        <span id="vodFilterCount" class="form-sublabel vod-filter-count"></span>
                         <label id="vodHideDownloadedLabel" class="inline-toggle" title="">
                             <input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()">
                             <span id="vodHideDownloadedText">Hide downloaded</span>
diff --git a/src/styles.css b/src/styles.css
index 3f3dc60..9d87188 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -160,6 +160,24 @@ body {
     font-weight: 600;
 }
 
+/* VOD filter row — sits above the grid: filter input, clear, sort, count, hide-toggle.
+   Previously every property was inline-styled on the <div> in index.html. */
+.vod-filter-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    flex-wrap: wrap;
+}
+
+.vod-filter-row .vod-sort-label {
+    margin-left: 8px;
+}
+
+.vod-filter-row .vod-filter-count {
+    min-width: 80px;
+}
+
 /* ============================================
    VOD BULK-ACTION BAR — slides in when 1+ VOD is selected
    ============================================