release: 4.6.83 .filename-template-grid CSS class + label for= associations

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.82",
+  "version": "4.6.83",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.82",
+      "version": "4.6.83",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitch-vod-manager",
-  "version": "4.6.82",
+  "version": "4.6.83",
   "description": "Twitch VOD Manager - Download Twitch VODs easily",
   "main": "dist/main.js",
   "author": "xRangerDE",

src/index.html

@@ -643,14 +643,14 @@
                                 <button class="btn-secondary" id="templatePresetArchive" type="button" onclick="applyTemplatePreset('archive')">Preset: Archive</button>
                                 <button class="btn-secondary" id="templatePresetClipper" type="button" onclick="applyTemplatePreset('clipper')">Preset: Clipper</button>
                             </div>
-                            <div style="display: grid; gap: 8px; margin-top: 8px;">
+                            <div class="filename-template-grid">
-                                <label id="vodTemplateLabel" style="font-size: 13px; color: var(--text-secondary);">VOD Template</label>
+                                <label id="vodTemplateLabel" for="vodFilenameTemplate">VOD Template</label>
                                 <input type="text" id="vodFilenameTemplate" class="input-monospace" placeholder="{title}.mp4" oninput="validateFilenameTemplates()">
 
-                                <label id="partsTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">VOD Part Template</label>
+                                <label id="partsTemplateLabel" for="partsFilenameTemplate">VOD Part Template</label>
                                 <input type="text" id="partsFilenameTemplate" class="input-monospace" placeholder="{date}_Part{part_padded}.mp4" oninput="validateFilenameTemplates()">
 
-                                <label id="defaultClipTemplateLabel" style="font-size: 13px; color: var(--text-secondary); margin-top: 4px;">Clip Template</label>
+                                <label id="defaultClipTemplateLabel" for="defaultClipFilenameTemplate">Clip Template</label>
                                 <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>

src/styles.css

@@ -2131,6 +2131,24 @@ select option {
     line-height: 1.45;
 }
 
+/* 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. */
+.filename-template-grid {
+    display: grid;
+    gap: 8px;
+    margin-top: 8px;
+}
+
+.filename-template-grid label {
+    font-size: 13px;
+    color: var(--text-secondary);
+}
+
+.filename-template-grid label:not(:first-child) {
+    margin-top: 4px;
+}
+
 /* Settings toggle row — label wraps an input[type=checkbox] + span.
    Used 17 times across the Settings cards. Adjacent-sibling
    combinator adds the gap between consecutive toggle rows so the