Phase 23 UX polish: compact layouts, collapsibles, test trip

Dashboard:
- OBD stat cards more compact (py-2, h6 health values, 'OBD' label fits)
- obd-val class prevents Disconnected wrapping
- Speed graph collapsed by default with toggle chevron button
- GPS map + coordinates merged into single card with footer coords
- Pi health rows use h6 (less tall), alert py-2

Dashcam:
- Device status is now a compact single-line bar
- Files on dashcam section is collapsible (hidden by default)
- Import status moved into the dashcam files card footer
- Imported videos on Pi moved to top, open by default
- Column headers trimmed (Select→empty, Actions→empty, Preview→empty)

Trip history:
- col-12 on mobile so list stacks above the map
- Shorter column labels (Distance→km, Duration→Time, Max speed→Max)
- history-map height reduced for mobile (22rem on small screens)

Settings:
- Cellular + ntfy merged into one collapsible card
- Alert thresholds collapsible (advanced)
- Phone hotspot instructions shortened
- Upload retention uses inline row layout (compact)
- All cards use shadow-sm, smaller headers

CSS:
- obd-val: word-break + smaller font for OBD status values
- collapse-chevron: smooth rotation transition
- #map height 18rem (was 20rem)
- history-map 32rem desktop / 22rem mobile (was 36rem)

Co-authored-by: Copilot <[email protected]>

templates/history.html

@@ -8,32 +8,29 @@
 {% endblock %}
 
 {% block content %}
-<div class="d-sm-flex justify-content-between align-items-center mb-4">
-    <div>
-        <h3 class="text-dark mb-1">Trip history</h3>
-        <p class="text-muted mb-0">Review recorded drives and replay their routes offline.</p>
-    </div>
-</div>
+<h3 class="text-dark mb-3 fw-bold">Trip history</h3>
 
-<div class="row">
-    <div class="col-xl-5 mb-4">
-        <div class="card shadow h-100">
-            <div class="card-header py-3">
+{# Mobile: list on top, map below. Desktop: side by side. #}
+<div class="row g-3">
+    {# ── Trip list ──────────────────────────────────────────────────── #}
+    <div class="col-12 col-xl-5">
+        <div class="card shadow-sm">
+            <div class="card-header py-2">
                 <h6 class="text-primary fw-bold m-0">Recorded trips</h6>
             </div>
             <div class="card-body p-0">
-                <div id="trip-loading" class="text-center text-muted p-5">
+                <div id="trip-loading" class="text-center text-muted py-4">
                     <span class="spinner-border spinner-border-sm me-2" aria-hidden="true"></span>
-                    Loading trips...
+                    Loading…
                 </div>
                 <div id="trip-error" class="alert alert-danger m-3" role="alert" hidden></div>
                 {{ data_table(
                     "trip-list",
                     [
                         {"key": "started", "label": "Started", "sortable": true},
-                        {"key": "distance", "label": "Distance", "sortable": true},
-                        {"key": "duration", "label": "Duration", "sortable": true},
-                        {"key": "maxSpeed", "label": "Max speed", "sortable": true},
+                        {"key": "distance", "label": "km", "sortable": true},
+                        {"key": "duration", "label": "Time", "sortable": true},
+                        {"key": "maxSpeed", "label": "Max", "sortable": true},
                         {"key": "action", "label": "", "sortable": false}
                     ],
                     "No trips detected",
@@ -42,9 +39,11 @@
             </div>
         </div>
     </div>
-    <div class="col-xl-7 mb-4">
-        <div class="card shadow">
-            <div class="card-header py-3 d-flex justify-content-between align-items-center">
+
+    {# ── Route replay map ───────────────────────────────────────────── #}
+    <div class="col-12 col-xl-7">
+        <div class="card shadow-sm">
+            <div class="card-header py-2 d-flex justify-content-between align-items-center">
                 <h6 class="text-primary fw-bold m-0">Route replay</h6>
                 <span id="trip-summary" class="small text-muted">Select a trip</span>
             </div>
@@ -52,10 +51,11 @@
                 <div id="history-map" aria-label="Selected trip route map"></div>
                 <div id="trip-timeline" class="border-top p-3" hidden>
                     <div class="d-flex align-items-center gap-3">
-                        <button id="trip-play" class="btn btn-primary btn-sm" type="button" aria-label="Play trip replay">
+                        <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>
-                        <input id="trip-scrubber" class="form-range flex-grow-1" type="range" min="0" max="0" value="0" aria-label="Trip replay timeline">
+                        <input id="trip-scrubber" class="form-range flex-grow-1" type="range"
+                               min="0" max="0" value="0" aria-label="Trip replay timeline">
                     </div>
                     <div class="d-flex flex-wrap justify-content-between gap-2 small mt-2">
                         <strong id="trip-replay-time"></strong>