From 38aadb6fb93bc7d7c98aab820f1d636212e04bd2 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 07:06:03 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20.template-lint=20owns=20its=20own=20?=
 =?UTF-8?q?margin-top=20=E2=80=94=20unifies=20two=20divergent=20inline=20v?=
 =?UTF-8?q?alues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Both template-lint usages (clip-cutter modal at index.html:105 and Settings filename-template card at index.html:657) had different inline margin-top values — 4px vs 6px. The visual difference is essentially imperceptible but it's a pointless divergence: the same class, same context (a lint badge directly below a template input), spaced differently for no design reason.

Hoisted margin-top:6px into the .template-lint base class. Both usages now drop their inline override and pick up the same rhythm. Clip-cutter's lint shifts 2px down — visually identical.

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

diff --git a/src/index.html b/src/index.html
index 18cfa9c..fc4f4f7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -102,7 +102,7 @@
                 <div id="clipFilenameTemplateWrap" class="clip-template-wrap" style="display:none;">
                     <input type="text" id="clipFilenameTemplate" value="{date}_{part}.mp4" placeholder="{date}_{part}.mp4" class="clip-modal-template-input" oninput="updateFilenameExamples()">
                     <div id="clipTemplateHelp" class="clip-modal-hint">Platzhalter: {title} {id} {channel} {date} {part} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
-                    <div id="clipTemplateLint" class="template-lint ok" style="margin-top: 4px;">Template-Check: OK</div>
+                    <div id="clipTemplateLint" class="template-lint ok">Template-Check: OK</div>
                     <button class="btn-secondary" id="clipTemplateGuideBtn" style="margin-top: 8px;" onclick="openTemplateGuide('clip')">Template Guide</button>
                 </div>
             </div>
@@ -654,7 +654,7 @@
                                 <input type="text" id="defaultClipFilenameTemplate" class="input-monospace" placeholder="{date}_{part}.mp4" oninput="validateFilenameTemplates()">
                             </div>
                             <div id="filenameTemplateHint" class="form-note" style="margin-top: 8px;">Platzhalter: {title} {id} {channel} {date} {part} {part_padded} {trim_start} {trim_end} {trim_length} {date_custom="yyyy-MM-dd"}</div>
-                            <div id="filenameTemplateLint" class="template-lint ok" style="margin-top: 6px;">Template-Check: OK</div>
+                            <div id="filenameTemplateLint" class="template-lint ok">Template-Check: OK</div>
                         </div>
                     </div>
 
diff --git a/src/styles.css b/src/styles.css
index 9345f7b..9001185 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -2312,10 +2312,15 @@ select option {
    template inputs and by the clip-cutter modal's custom template
    row. Two states: green for OK, red for unknown-placeholder
    warning. Pull the colours from --success / --error vars so the
-   lint always tracks the rest of the apps semantic palette. */
+   lint always tracks the rest of the apps semantic palette.
+
+   margin-top is part of the class so both usage sites pick up the
+   same rhythm — the previous inline-style values diverged by 2px
+   between the two spots, an inconsistency that's not worth tracking. */
 .template-lint {
     font-size: 12px;
     line-height: 1.4;
+    margin-top: 6px;
     transition: color 0.15s;
 }