fix: clamp max-speed label at edges + move trip location next to time

- placeMaxTick() clamps the label so it stays within the scrubber instead of
  overlapping the time/speed readouts when max speed is near an edge
- give the scrubber row more bottom margin (mb-3) so the tick label clears the
  readout row below
- move the trip location readout directly under the timestamp (left side),
  removing the separate bottom line
This commit is contained in:
Mathieu Moran
2026-08-15 18:14:21 -04:00
parent 0072322bc2
commit 42d7f8eb18
3 changed files with 18 additions and 8 deletions
+5 -3
View File
@@ -64,7 +64,7 @@
<div id="history-map" aria-label="Selected trip route map"
data-min-zoom="8" data-max-zoom="15"></div>
<div id="trip-timeline" class="border-top p-3" hidden>
<div class="d-flex align-items-center gap-3 mb-2">
<div class="d-flex align-items-center gap-3 mb-3">
<button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play">
<i class="fas fa-play" aria-hidden="true"></i>
</button>
@@ -78,13 +78,15 @@
</div>
</div>
<div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">
<strong id="trip-replay-time"></strong>
<div class="min-w-0">
<strong id="trip-replay-time" class="d-block"></strong>
<span id="trip-replay-location" class="text-muted" style="font-size:0.75rem;"></span>
</div>
<div class="text-end">
<span id="trip-replay-speed" class="text-muted d-block"></span>
<span id="trip-replay-odometer" class="text-muted d-block" style="font-size:0.75rem;"></span>
</div>
</div>
<div id="trip-replay-location" class="text-muted mt-1" style="font-size:0.75rem;min-height:1rem"></div>
</div>
</div>
</div>