From 63be9fc5416f6cd3aef911cecacdb697d7b86362 Mon Sep 17 00:00:00 2001
From: CircleShift <kgunger12@gmail.com>
Date: Sat, 21 Jun 2025 15:25:11 -0400
Subject: Slider percentage fixes

---
 scripts/main.js    | 2 +-
 styles/widgets.css | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/scripts/main.js b/scripts/main.js
index cd213a2..d0f4e28 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -10,7 +10,7 @@ class Client {
             { type: "button", name: "bt", props: {}, },
             { type: "checkbox", name: "cb", props: {}, state: true },
             { type: "toggle", name: "tg", props: {}, state: false },
-            { type: "slider", name: "sli", props: {max: 10, min: 1}, state: 6 },
+            { type: "slider", name: "sli", props: {max: 10, min: 1, percent: true}, state: 6 },
             { type: "color-light", name: "cli", state: 0.7 },
             { type: "color-temp", name: "ctp", state: 3000 },
             { type: "color-wheel", name: "cwh", state: Color.from_rgb(255, 200, 200) },
diff --git a/styles/widgets.css b/styles/widgets.css
index 40ec4fc..9483a81 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -210,7 +210,7 @@
     z-index: 2;
 
     font-weight: bold;
-    width: calc(1.2 * var(--base-unit));
+    min-width: var(--base-unit);
     height: var(--base-unit);
     pointer-events: none;
     user-select: none;
@@ -233,6 +233,11 @@
     transition-duration: 0s;
 }
 
+.color-light > .detail, .color-temp > .detail, .color-wheel > .detail {
+    min-width: 0;
+    width: var(--base-unit);
+}
+
 .color-light:active > .detail,
 .color-temp:active > .detail,
 .color-wheel:active > .detail,
-- 
cgit v1.2.3