release: 4.6.80 .vod-filter-row CSS extraction

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.79",
+  "version": "4.6.80",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.79",
+      "version": "4.6.80",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.79",
+  "version": "4.6.80",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

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>

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
    ============================================