fix(timetravel): скрывать boundary-метки при коллизии с курсором

This commit is contained in:
Александр Зимин
2026-05-12 08:55:13 +00:00
parent 47151563c3
commit c76e7a4029
@@ -515,26 +515,34 @@ function TimelineSlider({
/> />
</div> </div>
{/* Date labels (bottom) — start / value / now */} {/* Date labels (bottom) — start / value / now.
* Boundary-метки (min/max) скрываются, когда курсор подъехал близко,
* иначе текст накладывается в "05.005.05". Порог 12% подобран так,
* чтобы две DD.MM метки ~ 36px @ text-cap не пересекались на типичной
* ширине трека ~340px. */}
<div className="relative h-4 mt-1 text-mono text-cap text-mute"> <div className="relative h-4 mt-1 text-mono text-cap text-mute">
{pct > 12 && (
<span className="absolute left-0"> <span className="absolute left-0">
{new Date(range.min).toLocaleDateString(undefined, { {new Date(range.min).toLocaleDateString(undefined, {
month: '2-digit', month: '2-digit',
day: '2-digit', day: '2-digit',
})} })}
</span> </span>
)}
<span <span
className="absolute -translate-x-1/2 text-accent font-semibold" className="absolute -translate-x-1/2 text-accent font-semibold"
style={{ left: `${pct}%` }} style={{ left: `${pct}%` }}
> >
{dateLabel} {dateLabel}
</span> </span>
{pct < 88 && (
<span className="absolute right-0"> <span className="absolute right-0">
{new Date(range.max).toLocaleDateString(undefined, { {new Date(range.max).toLocaleDateString(undefined, {
month: '2-digit', month: '2-digit',
day: '2-digit', day: '2-digit',
})} })}
</span> </span>
)}
</div> </div>
</div> </div>
) )