[fix](trx-frontend-http): label the overflow tab Tools and hide its glyph

The button rendered as "•••More": the dots span carried no styling at
all, so the glyph sat flush against the label instead of behaving like
the icon it is.  Every other tab hides its icon while labels are shown
and swaps to it when they are not; the dots now follow the same rule, so
the button reads "Tools" beside the other labels and becomes the glyph
alone in the icon band.

"More" also said nothing about the destinations behind it.  The menu
holds Statistics, Recorder, Settings and About, so name it Tools and give
the button an aria-label that spells that out.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz
Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js

@@ -843,7 +843,8 @@ function elementById(id) {
     more.id = "mobile-more-btn";
     more.className = "tab mobile-more-btn";
     more.type = "button";
-    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
+    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
+    more.setAttribute("aria-label", "Tools and settings");
     more.setAttribute("aria-haspopup", "menu");
     more.setAttribute("aria-expanded", "false");
     const menu = document.createElement("div");

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -1541,6 +1541,7 @@ small { color: var(--text-muted); }
  * More always fit, so the strip never has to hide a destination. */
 @media (max-width: 1180px) and (min-width: 701px) {
   .tab-bar-nav .tab .tab-label { display: none; }
+  .tab-bar-nav .tab .tab-icon, .tab-bar-nav .tab .tab-more-icon { display: block; }
   .tab-bar-nav .tab { padding: 0.5rem 0.6rem; }
 }
 .tab {
@@ -1564,6 +1565,7 @@ small { color: var(--text-muted); }
   flex-shrink: 0;
 }
 .tab-label { display: block; }
+.tab-more-icon { display: none; }
 .about-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
 .about-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 0.5rem; padding: 0; overflow: hidden; }
 .about-card-title { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-heading); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--card-bg) 50%, var(--bg)); }
@@ -3277,7 +3279,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
     color: var(--text);
     box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
   }
-  .tab-icon { display: block; }
+  .tab-icon, .tab-more-icon { display: block; }
   /* Shorten long tab labels to keep bottom nav compact */
   .tab[data-tab="bookmarks"] .tab-label { font-size: 0.6rem; }
   .tab[data-tab="digital-modes"] .tab-label  { font-size: 0.6rem; }

src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts

@@ -448,7 +448,8 @@ function elementById<T extends HTMLElement>(id: string): T {
     more.id = "mobile-more-btn";
     more.className = "tab mobile-more-btn";
     more.type = "button";
-    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">More</span>';
+    more.innerHTML = '<span class="tab-more-icon" aria-hidden="true">•••</span><span class="tab-label">Tools</span>';
+    more.setAttribute("aria-label", "Tools and settings");
     more.setAttribute("aria-haspopup", "menu");
     more.setAttribute("aria-expanded", "false");
     const menu = document.createElement("div");