From 3362138d1adf39869e9416d592e7e0ca29981fa4 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 06:56:31 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20.form-stack=20size=20modifiers=20+?=
 =?UTF-8?q?=20.input-narrow=20=E2=80=94=205=20inline=20width=20styles=20go?=
 =?UTF-8?q?ne?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related size-modifier patterns extracted:

1. .form-stack.size-sm (min-width:120px) and .form-stack.size-md (min-width:160px) — the Auto-Cleanup 3-up row carried three near-identical inline min-width declarations (120 / 160 / 160). They control where the row breaks to a new line on narrow widths, so the breakpoint metadata is logically a layout-modifier-class concern, not inline-style markup.

2. .input-narrow (width:90px) — the two Auto-VOD inputs (Poll-Intervall, Max. Alter) had their width inline because the values are 2-3 digits and a full-width input would look odd. Encoded once as a class, applied twice.

Net: 5 inline style attributes gone, 3 new CSS rules.

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

diff --git a/src/index.html b/src/index.html
index 9e97f79..7f08c18 100644
--- a/src/index.html
+++ b/src/index.html
@@ -706,18 +706,18 @@
                             <span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
                         </label>
                         <div class="form-row" style="gap:12px; flex-wrap:wrap; margin-bottom: 8px;">
-                            <label class="form-stack" style="min-width:120px;">
+                            <label class="form-stack size-sm">
                                 <span id="autoCleanupDaysLabel" class="form-sublabel">Tage-Schwelle</span>
                                 <input type="number" id="autoCleanupDays" min="1" max="3650" value="30">
                             </label>
-                            <label class="form-stack" style="min-width:160px;">
+                            <label class="form-stack size-md">
                                 <span id="autoCleanupTargetLabel" class="form-sublabel">Bereich</span>
                                 <select id="autoCleanupTarget">
                                     <option value="live_only" id="autoCleanupTargetLive">Nur Live-Aufnahmen</option>
                                     <option value="all" id="autoCleanupTargetAll">Alle Aufnahmen</option>
                                 </select>
                             </label>
-                            <label class="form-stack" style="min-width:160px;">
+                            <label class="form-stack size-md">
                                 <span id="autoCleanupActionLabel" class="form-sublabel">Aktion</span>
                                 <select id="autoCleanupAction">
                                     <option value="archive" id="autoCleanupActionArchive">In Archiv verschieben</option>
@@ -764,9 +764,9 @@
                         <p id="autoVodCardIntro" class="card-intro">Streamer mit aktiviertem VOD-Toggle werden in dem hier festgelegten Intervall auf neue Twitch-VODs geprueft. Neue VODs innerhalb des Alters-Fensters werden automatisch zur Download-Queue hinzugefuegt.</p>
                         <div class="form-row aligned">
                             <label id="autoVodPollMinutesLabel" class="form-sublabel" for="autoVodPollMinutes">Poll-Intervall (Minuten)</label>
-                            <input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" style="width:90px;">
+                            <input type="number" id="autoVodPollMinutes" min="5" max="360" value="15" class="input-narrow">
                             <label id="autoVodMaxAgeHoursLabel" class="form-sublabel" for="autoVodMaxAgeHours" style="margin-left:12px;">Max. Alter (Stunden)</label>
-                            <input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" style="width:90px;">
+                            <input type="number" id="autoVodMaxAgeHours" min="1" max="720" value="24" class="input-narrow">
                         </div>
                         <div class="form-row" style="align-items: center; gap: 12px; flex-wrap: wrap;">
                             <button class="btn-secondary" id="btnAutoVodScanNow" onclick="triggerManualAutoVodScan()">Jetzt scannen</button>
diff --git a/src/styles.css b/src/styles.css
index a9cc1d5..8e24eae 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2177,6 +2177,24 @@ select option {
     flex: 1;
 }
 
+/* Min-width sizing modifiers — let the row wrap to a new line before
+   the stack collapses below the named breakpoint. Replaces three inline
+   min-width declarations in the Auto-Cleanup 3-up row. */
+.form-stack.size-sm {
+    min-width: 120px;
+}
+
+.form-stack.size-md {
+    min-width: 160px;
+}
+
+/* Compact-width input — used for the Auto-VOD poll/age inputs where
+   the values are 2-3 digits and a full-width input would look odd
+   alongside their inline sublabels. */
+.input-narrow {
+    width: 90px;
+}
+
 /* Block-level note text — same colour as .form-sublabel but reserved
    for full-row paragraphs like the cleanup report area. */
 .form-note {