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");