fix: gate toggle button overflow, white dot stays within bounds

This commit is contained in:
root 2026-03-11 15:29:37 +00:00
parent f8f13a48d5
commit 06552c2b75

View File

@ -143,9 +143,9 @@ function GateRow({
<button
type="button"
onClick={onToggle}
className={`relative w-10 h-5 rounded-full transition-colors ${enabled ? "bg-blue-500" : "bg-slate-300"}`}
className={`relative inline-flex items-center w-10 h-5 rounded-full transition-colors flex-shrink-0 ${enabled ? "bg-blue-500" : "bg-slate-300"}`}
>
<span className={`absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${enabled ? "translate-x-5" : "translate-x-0.5"}`} />
<span className={`absolute top-0.5 left-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform ${enabled ? "translate-x-5" : "translate-x-0"}`} />
</button>
</div>
{enabled && <div className="mt-2">{children}</div>}