release: 4.6.96 .settings-card.centered + .info-text + .stats-summary-grid

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.95",
+  "version": "4.6.96",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "twitch-vod-manager",
-      "version": "4.6.95",
+      "version": "4.6.96",
       "license": "MIT",
       "dependencies": {
         "axios": "^1.6.0",

package.json

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

src/index.html

@@ -304,9 +304,9 @@
                         <div class="clip-status" id="clipStatus"></div>
                     </div>
 
-                    <div class="settings-card" style="max-width: 600px; margin: 20px auto;">
+                    <div class="settings-card centered">
                         <h3 id="clipsInfoTitle">Info</h3>
-                        <p style="color: var(--text-secondary); line-height: 1.6; white-space: pre-line;" id="clipsInfoText">
+                        <p id="clipsInfoText" class="info-text">
                             Unterstutzte Formate:
                             - https://clips.twitch.tv/ClipName
                             - https://www.twitch.tv/streamer/clip/ClipName
@@ -431,7 +431,7 @@
 
                     <div class="settings-card">
                         <h3 id="statsSummaryTitle">Uebersicht</h3>
-                        <div id="statsSummaryGrid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:12px;"></div>
+                        <div id="statsSummaryGrid" class="stats-summary-grid"></div>
                     </div>
 
                     <div class="settings-card">

src/styles.css

@@ -1626,6 +1626,14 @@ select option {
     margin-bottom: 20px;
 }
 
+/* Centred-narrow settings card — used for the standalone Clips Info
+   card where the content (a short list of supported URL formats) reads
+   better at a constrained width than across the full main column. */
+.settings-card.centered {
+    max-width: 600px;
+    margin: 20px auto;
+}
+
 .settings-card h3 {
     font-size: 16px;
     margin-bottom: 15px;
@@ -2221,6 +2229,23 @@ select option {
     color: var(--accent);
 }
 
+/* Multi-line info text — preserves authored line breaks (white-space:
+   pre-line) so the Clips card can list URL formats one-per-line in
+   the HTML without separate <br>/<li> markup. */
+.info-text {
+    color: var(--text-secondary);
+    line-height: 1.6;
+    white-space: pre-line;
+}
+
+/* Responsive KPI grid for the Stats Summary card — fits as many 180px
+   tiles per row as the column allows, with equal-share growth. */
+.stats-summary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+    gap: 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. */