From 41ddecf5a7b77dd3d8a56488584380d8a8890d74 Mon Sep 17 00:00:00 2001 From: Stan Grams Date: Sun, 2 Aug 2026 23:36:41 +0200 Subject: [PATCH] [fix](trx-frontend-http): label the overflow tab Tools and hide its glyph MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz Signed-off-by: Stan Grams --- .../trx-frontend-http/assets/web/generated/app.js | 3 ++- .../trx-frontend/trx-frontend-http/assets/web/style.css | 4 +++- .../trx-frontend/trx-frontend-http/frontend/src/ui-core.ts | 3 ++- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js index 85b09182..820471f7 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/generated/app.js +++ b/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 = 'More'; + more.innerHTML = 'Tools'; + more.setAttribute("aria-label", "Tools and settings"); more.setAttribute("aria-haspopup", "menu"); more.setAttribute("aria-expanded", "false"); const menu = document.createElement("div"); diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css index b75b9a3b..b352d661 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css +++ b/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; } diff --git a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts index 84b3fdc7..52c7ac59 100644 --- a/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts +++ b/src/trx-client/trx-frontend/trx-frontend-http/frontend/src/ui-core.ts @@ -448,7 +448,8 @@ function elementById(id: string): T { more.id = "mobile-more-btn"; more.className = "tab mobile-more-btn"; more.type = "button"; - more.innerHTML = 'More'; + more.innerHTML = 'Tools'; + more.setAttribute("aria-label", "Tools and settings"); more.setAttribute("aria-haspopup", "menu"); more.setAttribute("aria-expanded", "false"); const menu = document.createElement("div");