From c2b59232bf361c24e72b7453774fb9c7b7e5b616 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sun, 22 Mar 2026 00:13:03 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20sort=20help=20tooltip=20=E2=80=94=20set?=
 =?UTF-8?q?=20title=20via=20JS=20so=20newlines=20render?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

HTML entities like &#10; don't work inside JS template literals
(inserted as literal text). Setting .title via JS with actual \n
newlines works correctly in browser tooltips.
---
 public/index.html | 2 +-
 public/packets.js | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index ff663798..5ba69041 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,7 +84,7 @@
   <script src="hop-resolver.js?v=1774126708"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774138336"></script>
+  <script src="packets.js?v=1774138383"></script>
   <script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index fb12e22c..129a58ea 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -449,7 +449,7 @@
             <option value="chrono-asc">Sort: Time ↑ (earliest)</option>
             <option value="chrono-desc">Sort: Time ↓ (latest)</option>
           </select>
-          <span class="sort-help" title="Sort controls how observations within a packet group are ordered, and which observation's data (observer, path) appears in the header row.&#10;&#10;Observer — Groups by observer station, earliest first.&#10;Path ↑ — Shortest paths first.&#10;Path ↓ — Longest paths first.&#10;Time ↑ — Earliest observation first.&#10;Time ↓ — Most recent first.">ⓘ</span>
+          <span class="sort-help" id="sortHelpIcon">ⓘ</span>
         </div>
         <div class="filter-group">
           <div class="col-toggle-wrap">
@@ -503,6 +503,8 @@
     // Observation sort dropdown
     const obsSortSel = document.getElementById('fObsSort');
     obsSortSel.value = obsSortMode;
+    const sortHelpEl = document.getElementById('sortHelpIcon');
+    if (sortHelpEl) sortHelpEl.title = "Sort controls how observations are ordered within packet groups and which observation appears in the header row.\n\nObserver — Groups by observer station, earliest first.\nPath \u2191 — Shortest paths first.\nPath \u2193 — Longest paths first.\nTime \u2191 — Earliest observation first.\nTime \u2193 — Most recent first.";
     obsSortSel.addEventListener('change', async function () {
       obsSortMode = this.value;
       localStorage.setItem('meshcore-obs-sort', obsSortMode);