From 8f6d7b2d9a279efcfdb95eaddfab11750c27879e Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 07:17:09 +0200
Subject: [PATCH] cleanup: .section-header-actions class + drop redundant
 margin-top:0 on archiveTitle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The stats card header (Archiv-Statistik) had an inline-styled inner div grouping the "last scanned" label with the Aktualisieren button — display:flex; gap:8px; align-items:center;. Extracted that pattern to .section-header-actions, which has a real semantic role: it's the right-side action cluster inside a section-header that needs to stay together as a single flex item so the parent's justify-content:space-between can pin it to the right.

Same edit drops the inline style="margin-top:0;" from <h3 id="archiveTitle"> — the global * { margin: 0 } reset already zeroes it, so the inline declaration was a literal no-op that just added noise to the markup. Worth removing as it might mislead future readers into thinking the override does something.

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

diff --git a/src/index.html b/src/index.html
index c500d88..0ffc9fa 100644
--- a/src/index.html
+++ b/src/index.html
@@ -421,7 +421,7 @@
                     <div class="settings-card">
                         <div class="form-row section-header">
                             <h3 id="statsTitle">Archiv-Statistik</h3>
-                            <div style="display:flex; gap:8px; align-items:center;">
+                            <div class="section-header-actions">
                                 <span id="statsLastScannedLabel" class="form-sublabel"></span>
                                 <button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
                             </div>
@@ -453,7 +453,7 @@
                 <!-- Archive Search Tab -->
                 <div class="tab-content" id="archiveTab">
                     <div class="settings-card">
-                        <h3 id="archiveTitle" style="margin-top:0;">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>
                         <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...">
diff --git a/src/styles.css b/src/styles.css
index 9001185..067ba9f 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1777,6 +1777,16 @@ select option {
     margin: 0;
 }
 
+/* Right-side action cluster inside a section-header — keeps a label
+   and a button (or two) together as a single unit so the section-header
+   parent's justify-content:space-between can pin the cluster to the
+   right while the h3 stays at the left. */
+.section-header-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
 /* Plain centred form-row with bottom margin — the most common
    form-row shape in Settings (button + button + inline-toggle, or
    number-input + sublabel). Replaces three duplicated inline copies