fix: centre labeled toggle words beside the knob

assets/js/components/admin-ui/Toggles.js

@@ -262,6 +262,11 @@ class ToggleInstance {
 
         this.element.append(this.labelOn, this.labelOff, this.thumb);
 
+        if (this.labeled && typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.applyOpticalShift());
+            this.resizeObserver.observe(this.element);
+        }
+
         this.checkbox.classList.add(CLASS_INPUT);
         this.checkbox.setAttribute('tabindex', '-1');
         this.checkbox.setAttribute('aria-hidden', 'true');
@@ -418,6 +423,51 @@ class ToggleInstance {
                 this.element.classList.remove(CLASS_NO_ANIMATE);
             });
         }
+
+        this.applyOpticalShift();
+    }
+
+    // --------------------------------------------------------------------------
+
+    /**
+     * A word centred in the rectangular slot still looks pushed into the round
+     * cap, and a fixed nudge over-corrects short words. Shift toward the knob
+     * only as far as the word actually reaches into that cap.
+     */
+    applyOpticalShift() {
+
+        if (!this.labeled || !this.element.isConnected) {
+            return;
+        }
+
+        let styles = window.getComputedStyle(this.element);
+        let pad = (parseFloat(styles.paddingLeft) || 0) + (parseFloat(styles.paddingRight) || 0);
+        let gap = parseFloat(styles.columnGap) || 0;
+        let slot = this.element.clientWidth - pad - gap - this.thumb.offsetWidth;
+        let radius = this.element.clientHeight / 2;
+
+        if (slot <= 0 || radius <= 0) {
+            return;
+        }
+
+        //  The curve is felt for about a pill-height in from the cap
+        let influence = this.element.clientHeight;
+
+        let shiftFor = (label) => {
+            let range = document.createRange();
+            range.selectNodeContents(label);
+            let textWidth = range.getBoundingClientRect().width;
+            let sideGap = Math.max(0, (slot - textWidth) / 2);
+            let blend = Math.min(1, Math.max(0, (influence - sideGap) / influence));
+
+            return (radius / 2) * blend;
+        };
+
+        let shiftOn = shiftFor(this.labelOn);
+        let shiftOff = shiftFor(this.labelOff);
+
+        this.labelOn.style.transform = shiftOn ? `translateX(${shiftOn}px)` : '';
+        this.labelOff.style.transform = shiftOff ? `translateX(${-shiftOff}px)` : '';
     }
 
     // --------------------------------------------------------------------------
@@ -454,6 +504,11 @@ class ToggleInstance {
         this.element.removeEventListener('keydown', this.onKeydown);
         this.checkbox.removeEventListener('change', this.onCheckboxChange);
 
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+
         this.element.replaceChildren();
         this.element.removeAttribute('role');
         this.element.removeAttribute('tabindex');

assets/sass/admin-ui/objects/_toggle.scss

@@ -27,7 +27,7 @@ $toggle-height: 24px;
 $toggle-pad: 2px;
 $toggle-compact-width: 42px;
 $toggle-labeled-height: 28px;
-$toggle-labeled-min-width: 6.25rem;
+$toggle-labeled-min-width: 8rem;
 $toggle-thumb: $toggle-height - ($toggle-pad * 2);
 
 $toggle-off-bg: $soft-slate;
@@ -42,7 +42,8 @@ $toggle-ring-width: 3px;
 $toggle-ring: rgba($slate, 0.35);
 $toggle-label-size: 0.75rem;
 $toggle-label-weight: 600;
-$toggle-transition: background-color 0.15s ease, box-shadow 0.15s ease;
+$toggle-label-knob-gap: 0.25rem;
+$toggle-transition: background-color 0.15s ease, box-shadow 0.15s ease, grid-template-columns 0.15s ease;
 $toggle-thumb-transition: left 0.15s ease;
 $toggle-label-transition: opacity 0.15s ease;
 
@@ -108,42 +109,53 @@ $toggle-label-transition: opacity 0.15s ease;
     transition: $toggle-label-transition;
 }
 
-//  Both words occupy one grid cell so the wider one wins the width
+//  Two columns: a thumb-sized spacer and 1fr for the words. Off puts the
+//  spacer on the left; on puts it on the right. Each word lives in the 1fr
+//  so it centres in the track beside the knob, not in the pill as a whole.
 .admin-toggle--labeled {
     --admin-toggle-height: #{$toggle-labeled-height};
 
     display: inline-grid;
-    grid-template-areas: "stack";
+    grid-template-columns: var(--admin-toggle-thumb) minmax(0, 1fr);
+    grid-template-rows: minmax(0, 1fr);
     align-items: center;
-    justify-items: center;
+    column-gap: $toggle-label-knob-gap;
     width: var(--admin-toggle-width, auto);
     min-width: $toggle-labeled-min-width;
-    padding-right: calc(var(--admin-toggle-thumb) + var(--admin-toggle-pad) + 0.7rem);
-    padding-left: calc(var(--admin-toggle-thumb) + var(--admin-toggle-pad) + 0.7rem);
+    padding: var(--admin-toggle-pad);
 
     .admin-toggle__label {
         display: block;
-        grid-area: stack;
+        grid-row: 1;
+        width: 100%;
+        min-width: 0;
         text-align: center;
     }
 
     .admin-toggle__label--on {
+        grid-column: 1;
         color: $toggle-on-color;
         opacity: 0;
     }
 
     .admin-toggle__label--off {
+        grid-column: 2;
         color: $toggle-off-color;
         opacity: 1;
     }
 }
 
 .admin-toggle--labeled.admin-toggle--on {
+    grid-template-columns: minmax(0, 1fr) var(--admin-toggle-thumb);
+    padding: var(--admin-toggle-pad);
+
     .admin-toggle__label--on {
+        grid-column: 1;
         opacity: 1;
     }
 
     .admin-toggle__label--off {
+        grid-column: 2;
         opacity: 0;
     }
 }