From cf896ec1e5e3692a25a3bf19828808e6bf5cfb1d Mon Sep 17 00:00:00 2001
From: Jason Hoku <jlevien808@gmail.com>
Date: Sun, 15 Mar 2026 18:00:38 -0700
Subject: [PATCH] feat: add label size slider to dashboard settings

Slider in Label Mode settings (6-16px range) controls overlay text size.
Uses CSS custom property for instant updates. Persisted to localStorage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 resources/logic_state.js | 1 +
 resources/report.css     | 2 +-
 resources/template.html  | 7 +++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/resources/logic_state.js b/resources/logic_state.js
index 4b36a0f..325fea9 100644
--- a/resources/logic_state.js
+++ b/resources/logic_state.js
@@ -87,6 +87,7 @@ let updateDebounceTimer = null;
 // Which fields to show as overlays on cards (persisted to localStorage)
 var labelMode = labelMode || {
     enabled: false,
+    labelSize: 9,
     fields: {
         model: false,
         lora: false,
diff --git a/resources/report.css b/resources/report.css
index 9bc9dfd..c705ea3 100644
--- a/resources/report.css
+++ b/resources/report.css
@@ -559,7 +559,7 @@ body {
     color: #fff;
     padding: 2px 6px;
     border-radius: 3px;
-    font-size: 9px;
+    font-size: var(--label-font-size, 9px);
     font-weight: bold;
     font-family: monospace;
     white-space: nowrap;
diff --git a/resources/template.html b/resources/template.html
index de080dd..91ff61e 100644
--- a/resources/template.html
+++ b/resources/template.html
@@ -130,6 +130,13 @@
                     </label>
                 </div>
                 <div id="label-fields-container" style="display: none;">
+                    <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 8px;">
+                        <label for="label-size-slider" style="font-size: 10px; color: #999; white-space: nowrap;">Size:</label>
+                        <input type="range" id="label-size-slider" min="6" max="16" value="9" step="1"
+                            style="flex: 1; height: 14px; cursor: pointer;"
+                            oninput="updateLabelSize(this.value)">
+                        <span id="label-size-value" style="font-size: 10px; color: #999; min-width: 20px;">9px</span>
+                    </div>
                     <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 4px;">
                         <div style="display: flex; align-items: center; gap: 4px;">
                             <input type="checkbox" id="label-field-model" onchange="updateLabelFields()" style="width: 12px; height: 12px; cursor: pointer;">