fix: adjust minimum value for sampling rate input and improve label positioning for better UI clarity

This commit is contained in:
Usman Baig
2026-01-19 15:14:21 +01:00
parent 861ce94e05
commit 15238ab5be

View File

@@ -932,7 +932,7 @@ export default function SiteSettingsPage() {
</div> </div>
<input <input
type="range" type="range"
min={0} min={-1}
max={SAMPLING_RATE_OPTIONS.length - 1} max={SAMPLING_RATE_OPTIONS.length - 1}
step={1} step={1}
list="sampling-rate-ticks" list="sampling-rate-ticks"
@@ -940,12 +940,14 @@ export default function SiteSettingsPage() {
const i = (SAMPLING_RATE_OPTIONS as readonly number[]).indexOf(formData.replay_sampling_rate) const i = (SAMPLING_RATE_OPTIONS as readonly number[]).indexOf(formData.replay_sampling_rate)
return i >= 0 ? i : SAMPLING_RATE_OPTIONS.length - 1 return i >= 0 ? i : SAMPLING_RATE_OPTIONS.length - 1
})()} })()}
onChange={(e) => onChange={(e) => {
const v = parseInt(e.target.value, 10)
const i = Math.max(0, Math.min(SAMPLING_RATE_OPTIONS.length - 1, v))
setFormData({ setFormData({
...formData, ...formData,
replay_sampling_rate: SAMPLING_RATE_OPTIONS[parseInt(e.target.value, 10)], replay_sampling_rate: SAMPLING_RATE_OPTIONS[i],
}) })
} }}
className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange" className="w-full h-2 bg-neutral-200 dark:bg-neutral-700 rounded-lg appearance-none cursor-pointer accent-brand-orange"
/> />
<datalist id="sampling-rate-ticks"> <datalist id="sampling-rate-ticks">
@@ -953,9 +955,15 @@ export default function SiteSettingsPage() {
<option key={i} value={i} /> <option key={i} value={i} />
))} ))}
</datalist> </datalist>
<div className="flex justify-between text-xs text-neutral-500 mt-1"> <div className="relative h-4 mt-1">
{SAMPLING_RATE_OPTIONS.map((pct) => ( {SAMPLING_RATE_OPTIONS.map((pct) => (
<span key={pct}>{pct}%</span> <span
key={pct}
className="absolute text-xs text-neutral-500 -translate-x-1/2"
style={{ left: `${pct}%` }}
>
{pct}%
</span>
))} ))}
</div> </div>
</div> </div>