From 7f60dc99607697db76345432af167df68ed06571 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Fri, 30 Oct 2026 14:55:20 +0700
Subject: [PATCH] Switch knob sat 7px off the edge: no preflight left the
 browser's button padding on ReUI buttons

button[data-slot] gets padding 0 in the base layer (ReUI size utilities and the
console's own styles still win). The switch's help now lines up under its label by
the switch's 32px, and the dead .toggle input CSS from the native-switch days is gone.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
---
 src/theme/globals.css   | 12 +++++++++
 src/ui/Check.module.css | 56 ++---------------------------------------
 src/ui/Check.tsx        |  2 +-
 3 files changed, 15 insertions(+), 55 deletions(-)

diff --git a/src/theme/globals.css b/src/theme/globals.css
index 2589071..ab0a527 100644
--- a/src/theme/globals.css
+++ b/src/theme/globals.css
@@ -69,6 +69,18 @@ the System / Light / Dark theme without a second palette.
   --color-destructive-foreground: var(--dan);
 }
 /*
+No preflight means a `<button>` keeps the browser's own `1px 6px` padding. The ReUI
+parts that are buttons with a fixed size (the switch, the checkbox, the dialog's close)
+would push their content off the edge by it: the switch's knob sat 7px in from the
+left when off. In the base layer, so a ReUI size utility (`px-2.5`) and the console's
+own unlayered styles still win over it.
+*/
+@layer base {
+  button[data-slot] {
+    padding: 0;
+  }
+}
+/*
 ---break---
 */
 .dark {
diff --git a/src/ui/Check.module.css b/src/ui/Check.module.css
index c1e60da..00ce3f7 100644
--- a/src/ui/Check.module.css
+++ b/src/ui/Check.module.css
@@ -44,57 +44,5 @@
   max-width: 720px;
 }
 
-/*
-The switch. It is the same `input[type=checkbox]`, redrawn: the track is the
-input's own box and the knob is its offset inset shadow, so neither an extra
-element nor a pseudo-element the browser paints its own way is needed.
-*/
-.toggle input {
-  width: var(--ctrl-track-w);
-  height: var(--ctrl-track-h);
-  border-radius: var(--r-full);
-  background: var(--field);
-  background-image: none;
-  box-shadow:
-    var(--sunken),
-    inset calc(var(--ctrl-track-w) - var(--ctrl-track-h)) 0 0 -1px transparent;
-  position: relative;
-  transition:
-    background-color var(--t-fast),
-    border-color var(--t-fast);
-}
-
-/* The knob: a circle that travels from one end of the track to the other. */
-.toggle input::after {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  width: calc(var(--ctrl-track-h) - 6px);
-  height: calc(var(--ctrl-track-h) - 6px);
-  border-radius: var(--r-full);
-  background: var(--mute);
-  box-shadow: var(--shadow-knob);
-  transition: transform var(--t-medium), background var(--t-fast);
-}
-
-.toggle input:checked {
-  background-color: var(--acc);
-  background-image: none;
-  border-color: var(--acc-ink);
-  box-shadow: var(--edge-strong);
-}
-
-.toggle input:checked::after {
-  background: var(--on-acc);
-  transform: translateX(calc(var(--ctrl-track-w) - var(--ctrl-track-h)));
-}
-
-.toggle input:active:not(:disabled) { transform: none; }
-
-.toggle .help { margin-left: calc(var(--ctrl-track-w) + var(--s-6)); }
-
-@media (prefers-reduced-motion: reduce) {
-  .toggle input,
-  .toggle input::after { transition: none; }
-}
+/* The switch is ReUI's (32px wide), so its help lines up under the label by that width. */
+.helpSwitch { margin-left: calc(32px + var(--s-6)); }
diff --git a/src/ui/Check.tsx b/src/ui/Check.tsx
index ae3611d..de179d0 100644
--- a/src/ui/Check.tsx
+++ b/src/ui/Check.tsx
@@ -56,7 +56,7 @@ export function Check({
           {label}
         </span>
       </div>
-      {help && <div className={styles.help}>{help}</div>}
+      {help && <div className={toggle ? `${styles.help} ${styles.helpSwitch}` : styles.help}>{help}</div>}
     </div>
   )
 }