From ed20c447498a34ab35ff90f80e9cb9618e819595 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 06:27:05 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20settings-card=20h4=20+=20hr=20defaul?=
 =?UTF-8?q?ts=20=E2=80=94=20and=20Auto-Cleanup=20label=20reuses=20.toggle-?=
 =?UTF-8?q?row?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Auto-Cleanup subsection inside the Storage card carries three inline-styled patterns that are good candidates to live in the cascade rather than the markup:

- <hr> with border:none; border-top:1px solid var(--border-soft); margin:16px 0
- <h4> with margin:0 0 8px 0; font-size:14px
- a checkbox <label> wrapping the "Auto-Cleanup aktivieren" toggle with the same display:flex; align-items:center; gap:8px pattern that the existing .toggle-row class already encodes

Hoisted the hr + h4 styling to default .settings-card descendant rules — any future subsection divider/heading inside a settings card now follows the same rhythm without ceremony — and the label reuses .toggle-row (margin-bottom:8px stays inline because the next sibling is a form-row, not another toggle-row, so the .toggle-row + .toggle-row sibling rule doesn't apply).

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

diff --git a/src/index.html b/src/index.html
index bfcd897..ac77ee6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -698,10 +698,10 @@
                         <div id="storageSummary" style="color: var(--text-secondary); font-size:12px; margin-bottom:8px;"></div>
                         <div id="storageList"></div>
 
-                        <hr style="border:none; border-top:1px solid var(--border-soft); margin:16px 0;">
-                        <h4 id="cleanupTitle" style="margin:0 0 8px 0; font-size:14px;">Auto-Cleanup</h4>
+                        <hr>
+                        <h4 id="cleanupTitle">Auto-Cleanup</h4>
                         <p id="cleanupIntro" class="card-intro">Aufnahmen aelter als X Tage automatisch archivieren oder loeschen. Schiebt Sidecar-Chat-Dateien (.chat.json/.chat.jsonl) mit der Aufnahme.</p>
-                        <label style="display:flex; align-items:center; gap:8px; margin-bottom: 8px;">
+                        <label class="toggle-row" style="margin-bottom: 8px;">
                             <input type="checkbox" id="autoCleanupEnabledToggle">
                             <span id="autoCleanupEnabledLabel">Auto-Cleanup aktivieren</span>
                         </label>
diff --git a/src/styles.css b/src/styles.css
index 5849fdf..e434e70 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1634,6 +1634,22 @@ select option {
     gap: 8px;
 }
 
+/* Subsection heading inside a settings card — used when a single card
+   bundles two logical groups (Storage → Auto-Cleanup) and the second
+   needs its own miniature heading after a divider. */
+.settings-card h4 {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+}
+
+/* Horizontal divider inside settings cards — soft single line, balanced
+   vertical breathing room, no default browser shading. */
+.settings-card hr {
+    border: none;
+    border-top: 1px solid var(--border-soft);
+    margin: 16px 0;
+}
+
 .form-group {
     margin-bottom: 15px;
 }