cleanup: .form-row.search-bar + .select-compact.size-md modifiers

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>
This commit is contained in:
xRangerDE 2026-05-11 10:43:35 +02:00
parent 1faa6e35cf
commit 00e366ce50
2 changed files with 19 additions and 2 deletions

View File

@ -455,14 +455,14 @@
<div class="settings-card"> <div class="settings-card">
<h3 id="archiveTitle">Archiv durchsuchen</h3> <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> <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..."> <input type="text" id="archiveSearchQuery" class="filter-input flex-1-1-240" placeholder="Suche...">
<select id="archiveSearchType" class="select-compact"> <select id="archiveSearchType" class="select-compact">
<option value="all">Alle Typen</option> <option value="all">Alle Typen</option>
<option value="live">Live-Aufnahmen</option> <option value="live">Live-Aufnahmen</option>
<option value="vod">VOD-Downloads</option> <option value="vod">VOD-Downloads</option>
</select> </select>
<select id="archiveSearchStreamer" class="select-compact" style="min-width: 160px;"> <select id="archiveSearchStreamer" class="select-compact size-md">
<option value="">Alle Streamer</option> <option value="">Alle Streamer</option>
</select> </select>
<select id="archiveSearchSort" class="select-compact"> <select id="archiveSearchSort" class="select-compact">

View File

@ -849,6 +849,13 @@ select option {
font-size: 13px; 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 */
.queue-section { .queue-section {
border-top: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.1);
@ -1858,6 +1865,16 @@ select option {
margin-bottom: 10px; 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 { .log-panel {
background: #11151c; background: #11151c;
border: 1px solid rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.12);