From e513474e36290feb226c2f0c56832d0177a0669c Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Wed, 4 Jun 2025 13:38:50 -0500
Subject: [PATCH] Correct the reserved area math

---
 app/assets/stylesheets/knobs.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/knobs.css b/app/assets/stylesheets/knobs.css
index 345ce266f..bb1403fd7 100644
--- a/app/assets/stylesheets/knobs.css
+++ b/app/assets/stylesheets/knobs.css
@@ -1,6 +1,6 @@
 .knob {
   --knob-angle-reserve: 120deg;
-  --knob-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1));
+  --knob-option-angle: calc((360deg - var(--knob-angle-reserve)) / (var(--knob-options) - 1));
   --knob-option-size: 3ch;
   --knob-chamfer-size: 1ch;
   --knob-color: oklch(var(--lch-ink-light));
@@ -53,7 +53,7 @@
   position: absolute;
   transform:
     translate(-50%, -50%)
-    rotate(calc(-1 * var(--knob-angle-reserve) + (var(--knob-angle) * var(--i))))
+    rotate(calc(-1 * ((360deg - var(--knob-angle-reserve)) / 2) + (var(--knob-option-angle) * var(--i))))
     translateY(calc(-1 * var(--knob-radius) - 50% - var(--knob-tick-size)));
   z-index: 1;
 
@@ -79,7 +79,7 @@
 
   /* The value text */
   span {
-    rotate: calc(var(--knob-angle-reserve) - (var(--knob-angle) * var(--i)));
+    rotate: calc(((360deg - var(--knob-angle-reserve)) / 2) - (var(--knob-option-angle) * var(--i)));
   }
 
   input {
@@ -126,7 +126,7 @@
     border-radius: 50% 50% 2px 2px;
     inline-size: 4px;
     inset: auto auto 50% 50%;
-    rotate: calc(-1 * var(--knob-angle-reserve) + (var(--knob-angle) * var(--knob-index)));
+    rotate: calc(-1 * ((360deg - var(--knob-angle-reserve)) / 2) + (var(--knob-option-angle) * var(--knob-index)));
     transform-origin: center bottom;
     transition: rotate 100ms;
     translate: -50% 0;