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

2026-05-12 08:55:13 +00:00
parent 47151563c3
commit c76e7a4029
1 changed files with 21 additions and 13 deletions
@@ -515,26 +515,34 @@ function TimelineSlider({
        />
      </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">
+        {pct > 12 && (
          <span className="absolute left-0">
            {new Date(range.min).toLocaleDateString(undefined, {
              month: '2-digit',
              day: '2-digit',
            })}
          </span>
+        )}
        <span
          className="absolute -translate-x-1/2 text-accent font-semibold"
          style={{ left: `${pct}%` }}
        >
          {dateLabel}
        </span>
+        {pct < 88 && (
          <span className="absolute right-0">
            {new Date(range.max).toLocaleDateString(undefined, {
              month: '2-digit',
              day: '2-digit',
            })}
          </span>
+        )}
      </div>
    </div>
  )