From 00e366ce50a8877df99f66f4fc81e5bde798dfd6 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 10:43:35 +0200
Subject: [PATCH] cleanup: .form-row.search-bar + .select-compact.size-md
 modifiers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Archive-search tool-row carried two inline-style attrs:
- .form-row with gap:8px; margin-bottom:8px; flex-wrap:wrap; align-items:center (different rhythm from the existing .aligned / .section-header form-row modifiers — tool-row that should wrap on narrow widths)
- archiveSearchStreamer .select-compact with min-width:160px (matches the existing .form-stack.size-md width)

Extracted into two modifier classes:
- .form-row.search-bar — the search/filter tool-row pattern (search input + filter selects + go button collapse gracefully)
- .select-compact.size-md — wider select variant, mirrors the .form-stack.size-md pattern from 4.6.95 so width modifiers across element types share the same naming

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

diff --git a/src/index.html b/src/index.html
index 3dbde24..1062000 100644
--- a/src/index.html
+++ b/src/index.html
@@ -455,14 +455,14 @@
                     <div class="settings-card">
                         <h3 id="archiveTitle">Archiv durchsuchen</h3>
                         <p id="archiveIntro" class="card-intro">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;">
+                        <div class="form-row search-bar">
                             <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
                             <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" class="select-compact" style="min-width: 160px;">
+                            <select id="archiveSearchStreamer" class="select-compact size-md">
                                 <option value="">Alle Streamer</option>
                             </select>
                             <select id="archiveSearchSort" class="select-compact">
diff --git a/src/styles.css b/src/styles.css
index 95655e6..2d46b4f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -849,6 +849,13 @@ select option {
     font-size: 13px;
 }
 
+/* Wider variant — used for the Archive-search streamer-name select
+   where short streamer names would collapse the dropdown to an
+   unhelpful 80-100px otherwise. Matches the .form-stack.size-md width. */
+.select-compact.size-md {
+    min-width: 160px;
+}
+
 /* Queue Section */
 .queue-section {
     border-top: 1px solid rgba(255,255,255,0.1);
@@ -1858,6 +1865,16 @@ select option {
     margin-bottom: 10px;
 }
 
+/* Search/filter tool-row variant — wraps on narrow widths so the
+   select / input cluster collapses gracefully. Used by the Archive
+   search row (input + 3 selects + button). */
+.form-row.search-bar {
+    gap: 8px;
+    margin-bottom: 8px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
 .log-panel {
     background: #11151c;
     border: 1px solid rgba(255,255,255,0.12);