From 0072322bc2d3e9c80583eab1fe8f2363924b54a9 Mon Sep 17 00:00:00 2001
From: Mathieu Moran <mathieumoran1@gmail.com>
Date: Sat, 15 Aug 2026 18:05:38 -0400
Subject: [PATCH] style: timeline max-speed tick as up-arrow + 'Max speed'
 label

Replace the circle dot on the scrubber with a small up-pointing arrow just
below the line and a 'Max speed' text label.
---
 server/templates/history.html |  7 +++++--
 static/yaris.css              | 31 ++++++++++++++++++++++---------
 templates/history.html        |  7 +++++--
 3 files changed, 32 insertions(+), 13 deletions(-)

diff --git a/server/templates/history.html b/server/templates/history.html
index df81e9d..71f4790 100644
--- a/server/templates/history.html
+++ b/server/templates/history.html
@@ -67,14 +67,17 @@
                      data-tile-attrib="&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors &copy; <a href='https://carto.com/attributions'>CARTO</a>"
                      data-min-zoom="3" data-max-zoom="19"></div>
                 <div id="trip-timeline" class="border-top p-3" hidden>
-                    <div class="d-flex align-items-center gap-3">
+                    <div class="d-flex align-items-center gap-3 mb-2">
                         <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>
                         <div class="position-relative flex-grow-1">
                             <input id="trip-scrubber" class="form-range w-100" type="range"
                                    min="0" max="0" value="0" aria-label="Trip replay timeline">
-                            <div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden></div>
+                            <div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden>
+                                <span class="trip-max-tick-arrow" aria-hidden="true"></span>
+                                <span class="trip-max-tick-label">Max speed</span>
+                            </div>
                         </div>
                     </div>
                     <div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">
diff --git a/static/yaris.css b/static/yaris.css
index 45df919..10eae88 100644
--- a/static/yaris.css
+++ b/static/yaris.css
@@ -334,20 +334,33 @@ body {
     padding-bottom: .375rem;
 }
 
-/* Max-speed tick overlaid on the trip replay scrubber. */
+/* Max-speed tick overlaid on the trip replay scrubber: a small up-arrow with
+   an event label, sitting just below the scrubber line. */
 .trip-max-tick {
     position: absolute;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 12px;
-    height: 12px;
-    border-radius: 50%;
-    background: #f6c23e;
-    border: 2px solid #fff;
-    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
+    top: 100%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1px;
+    line-height: 1;
     cursor: pointer;
     z-index: 2;
 }
+.trip-max-tick-arrow {
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-bottom: 7px solid #f6c23e;
+}
+.trip-max-tick-label {
+    font-size: .62rem;
+    font-weight: 600;
+    color: #9a7d0a;
+    white-space: nowrap;
+}
 
 /* ── Dashcam / video ─────────────────────────────────────────────────────── */
 
diff --git a/templates/history.html b/templates/history.html
index 416a6a0..14cffbe 100644
--- a/templates/history.html
+++ b/templates/history.html
@@ -64,14 +64,17 @@
                 <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">
+                    <div class="d-flex align-items-center gap-3 mb-2">
                         <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>
                         <div class="position-relative flex-grow-1">
                             <input id="trip-scrubber" class="form-range w-100" type="range"
                                    min="0" max="0" value="0" aria-label="Trip replay timeline">
-                            <div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden></div>
+                            <div id="trip-max-tick" class="trip-max-tick" title="Max speed" hidden>
+                                <span class="trip-max-tick-arrow" aria-hidden="true"></span>
+                                <span class="trip-max-tick-label">Max speed</span>
+                            </div>
                         </div>
                     </div>
                     <div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">