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">
<span className="absolute left-0"> {pct > 12 && (
{new Date(range.min).toLocaleDateString(undefined, { <span className="absolute left-0">
month: '2-digit', {new Date(range.min).toLocaleDateString(undefined, {
day: '2-digit', month: '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>
<span className="absolute right-0"> {pct < 88 && (
{new Date(range.max).toLocaleDateString(undefined, { <span className="absolute right-0">
month: '2-digit', {new Date(range.max).toLocaleDateString(undefined, {
day: '2-digit', month: '2-digit',
})} day: '2-digit',
</span> })}
</span>
)}
</div> </div>
</div> </div>
) )