From 35dc3201d84da3b6692251def813002f971954db Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 06:12:10 +0200
Subject: [PATCH] cleanup: stats card header reuses .form-row.section-header +
 .card-intro.flush

The Statistics tab's "Archiv-Statistik" card had its own bespoke inline-styled flex header (display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px) plus an inline margin:0 on the h3 and an inline-styled intro paragraph with a different margin rhythm than the other 7 card intros (margin-top:8px; margin-bottom:0).

Two small additions reuse the existing classes:
- flex-wrap:wrap added to .form-row.section-header so the System-Check / Storage / now-Stats headers all wrap gracefully on narrow widths instead of overflowing. Strict improvement everywhere it's already used.
- .card-intro.flush modifier (margin-top:8px; margin-bottom:0) for intros that sit flush against the next block rather than spaced from it.

Three more inline style attributes gone, and the stats header now shares the same width-collapse behavior as the other section-header rows.

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

diff --git a/src/index.html b/src/index.html
index c333095..42d37af 100644
--- a/src/index.html
+++ b/src/index.html
@@ -419,14 +419,14 @@
                 <!-- Statistics Tab -->
                 <div class="tab-content" id="statsTab">
                     <div class="settings-card">
-                        <div style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;">
-                            <h3 id="statsTitle" style="margin:0;">Archiv-Statistik</h3>
+                        <div class="form-row section-header">
+                            <h3 id="statsTitle">Archiv-Statistik</h3>
                             <div style="display:flex; gap:8px; align-items:center;">
                                 <span id="statsLastScannedLabel" class="form-sublabel"></span>
                                 <button class="btn-secondary" id="btnStatsRefresh" onclick="refreshArchiveStats()">Aktualisieren</button>
                             </div>
                         </div>
-                        <p id="statsIntro" style="color: var(--text-secondary); font-size:13px; margin-top:8px; margin-bottom:0; line-height:1.5;">Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter <code>{streamer}/live/</code>, VOD-Downloads direkt unter <code>{streamer}/</code>. Lade-Zeit skaliert mit der Anzahl Dateien.</p>
+                        <p id="statsIntro" class="card-intro flush">Aggregiert ueber den Download-Ordner. Live-Aufnahmen liegen unter <code>{streamer}/live/</code>, VOD-Downloads direkt unter <code>{streamer}/</code>. Lade-Zeit skaliert mit der Anzahl Dateien.</p>
                     </div>
 
                     <div class="settings-card">
diff --git a/src/styles.css b/src/styles.css
index f331807..42db7c6 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1733,6 +1733,7 @@ select option {
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
+    flex-wrap: wrap;
 }
 
 .form-row.section-header h3 {
@@ -2157,6 +2158,14 @@ select option {
     margin-bottom: 12px;
 }
 
+/* Flush variant: the intro sits flush against the next sibling block
+   (e.g. the stats summary grid) and gets its top breathing room from
+   the preceding section-header row rather than its own bottom margin. */
+.card-intro.flush {
+    margin-top: 8px;
+    margin-bottom: 0;
+}
+
 /* Filename-templates 3-pair grid (VOD / Part / Clip template inputs).
    Each row is a label above an input; the label gets the 13px secondary
    styling that used to be inline on every label. */