From 274d3874f57e43aeba9db2c67c0780a05958a5e6 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 04:22:16 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20extract=20.select-compact=20class=20?=
 =?UTF-8?q?=E2=80=94=204=20selects=20outside=20.form-group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The vodSortSelect + the 3 archive-search selects all sat OUTSIDE
the .form-group container, which meant the existing
.form-group select rule did not apply to them. Each carried the
same ~110 chars of inline style hard-coding bg / border / radius /
padding / color.

Extracted to a shared .select-compact class (6px radius, 7px
padding, var(--bg-card) base, var(--border-soft) border) and
swapped all four call sites. Visual consistency between the
filter-row select in the VODs tab and the multi-select control
strip in the Archive search — same heights, same border treatment.

Minor visual change for the 3 archive selects (4px -> 6px
border-radius, 6px -> 7px vertical padding) so the controls now
match the rest of the apps button + input family. Worth the 1px
delta for the consistency.

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

diff --git a/src/index.html b/src/index.html
index e98b111..0cb7b65 100644
--- a/src/index.html
+++ b/src/index.html
@@ -264,15 +264,15 @@
                     <div class="vod-filter-row" style="display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
                         <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" style="color: var(--text-secondary); font-size:12px; margin-left:8px;">Sort:</label>
-                        <select id="vodSortSelect" onchange="onVodSortChange()" style="background: var(--bg-card); border:1px solid var(--border-soft); border-radius:6px; padding:7px 10px; color: var(--text); font-size:13px;">
+                        <label id="vodSortLabel" for="vodSortSelect" class="form-sublabel" style="margin-left:8px;">Sort:</label>
+                        <select id="vodSortSelect" class="select-compact" onchange="onVodSortChange()">
                             <option value="date_desc">Newest first</option>
                             <option value="date_asc">Oldest first</option>
                             <option value="views_desc">Most viewed</option>
                             <option value="duration_desc">Longest first</option>
                             <option value="duration_asc">Shortest first</option>
                         </select>
-                        <span id="vodFilterCount" style="color: var(--text-secondary); font-size:12px; min-width:80px;"></span>
+                        <span id="vodFilterCount" class="form-sublabel" style="min-width:80px;"></span>
                         <label id="vodHideDownloadedLabel" class="inline-toggle" title="">
                             <input type="checkbox" id="vodHideDownloadedToggle" onchange="onVodHideDownloadedChange()">
                             <span id="vodHideDownloadedText">Hide downloaded</span>
@@ -457,15 +457,15 @@
                         <p id="archiveIntro" style="color: var(--text-secondary); font-size:13px; margin-bottom:12px; line-height:1.5;">Suche nach Dateinamen, Streamern oder Datum-Strings. Treffer zeigen Recordings (Live + VOD); zugehoerige Chat- und Events-Dateien werden als Companion-Buttons angeboten.</p>
                         <div class="form-row" style="gap:8px; margin-bottom: 8px; flex-wrap: wrap; align-items:center;">
                             <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
-                            <select id="archiveSearchType" style="background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; color: var(--text);">
+                            <select id="archiveSearchType" class="select-compact">
                                 <option value="all">Alle Typen</option>
                                 <option value="live">Live-Aufnahmen</option>
                                 <option value="vod">VOD-Downloads</option>
                             </select>
-                            <select id="archiveSearchStreamer" style="background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; color: var(--text); min-width: 160px;">
+                            <select id="archiveSearchStreamer" class="select-compact" style="min-width: 160px;">
                                 <option value="">Alle Streamer</option>
                             </select>
-                            <select id="archiveSearchSort" style="background: var(--bg-card); border: 1px solid var(--border-soft); border-radius: 4px; padding: 6px 10px; color: var(--text);">
+                            <select id="archiveSearchSort" class="select-compact">
                                 <option value="date_desc">Neueste zuerst</option>
                                 <option value="date_asc">Aelteste zuerst</option>
                                 <option value="size_desc">Groesste zuerst</option>
diff --git a/src/styles.css b/src/styles.css
index 6954d73..1a9c2d2 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -780,6 +780,19 @@ select option {
     color: var(--text);
 }
 
+/* Compact-row select — used in tool/filter rows that sit OUTSIDE the
+   .form-group container (which has its own select padding rules).
+   Without this class the bare <select> from the global rule has no
+   bg / border / colour, leaving an OS-default-looking blank box. */
+.select-compact {
+    background: var(--bg-card);
+    border: 1px solid var(--border-soft);
+    border-radius: 6px;
+    padding: 7px 10px;
+    color: var(--text);
+    font-size: 13px;
+}
+
 /* Queue Section */
 .queue-section {
     border-top: 1px solid rgba(255,255,255,0.1);