From aa73a4bc00ee90dee28aa8b8ac932a627c50feea Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sun, 1 Mar 2026 15:23:08 +0100
Subject: [PATCH] [style](trx-frontend): simplify aprs overlay clear action

Render the APRS overlay clear action as inline clickable text inside
a span wrapper instead of a button-like control.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../assets/web/plugins/aprs.js                |  2 +-
 .../trx-frontend-http/assets/web/style.css    | 35 +++++--------------
 2 files changed, 10 insertions(+), 27 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/aprs.js b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/aprs.js
index 43b3741..23ba716 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/aprs.js
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/aprs.js
@@ -112,7 +112,7 @@ function updateAprsBar() {
     aprsBarOverlay.style.display = "none";
     return;
   }
-  let html = '<div class="aprs-bar-header"><span class="aprs-bar-title">APRS Live</span><span class="aprs-bar-clear-wrap"><button class="aprs-bar-clear" onclick="window.clearAprsBar()" aria-label="Clear APRS overlay"><span class="aprs-bar-clear-icon" aria-hidden="true">×</span><span>Clear</span></button></span></div>';
+  let html = '<div class="aprs-bar-header"><span class="aprs-bar-title">APRS Live</span><span class="aprs-bar-clear-wrap"><span class="aprs-bar-clear" role="button" tabindex="0" onclick="window.clearAprsBar()" onkeydown="if(event.key===\'Enter\'||event.key===\' \'){event.preventDefault();window.clearAprsBar();}" aria-label="Clear APRS overlay">Clear</span></span></div>';
   for (const pkt of okFrames) {
     const ts = pkt._ts ? `<span class="aprs-bar-time">${pkt._ts}</span>` : "";
     const call = `<span class="aprs-bar-call">${escapeMapHtml(pkt.srcCall)}</span>`;
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 0f78892..f365c97 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
@@ -679,50 +679,33 @@ small { color: var(--text-muted); }
   align-items: center;
   flex: 0 0 auto;
   padding: 0;
-  border: 1px solid color-mix(in srgb, var(--border-light) 16%, transparent);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--card-bg) 16%, transparent);
   align-self: center;
 }
 .aprs-bar-clear {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.04rem;
+  display: inline;
   background: transparent;
   border: none;
   border-radius: 0;
-  padding: 0 0.1rem;
-  line-height: 0.8;
+  padding: 0;
+  line-height: 1;
   font-family: inherit;
-  font-size: 0.36em;
+  font-size: 0.42em;
   font-weight: 600;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.03em;
   color: var(--text-muted);
   cursor: pointer;
-  opacity: 0.76;
+  opacity: 0.82;
   text-transform: uppercase;
   white-space: nowrap;
-  transition: opacity 120ms, background 120ms, border-color 120ms, color 120ms;
+  transition: opacity 120ms, color 120ms;
 }
 .aprs-bar-clear:hover {
   opacity: 1;
   color: var(--accent-green);
+  text-decoration: underline;
 }
 .aprs-bar-clear-wrap:hover {
-  background: color-mix(in srgb, var(--card-bg) 34%, transparent);
-  border-color: color-mix(in srgb, var(--accent-green) 18%, var(--border-light));
-}
-.aprs-bar-clear-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  height: auto;
-  border-radius: 0;
-  background: transparent;
-  color: color-mix(in srgb, var(--accent-green) 68%, var(--text-muted));
-  font-size: 0.7em;
-  line-height: 0.75;
+  color: inherit;
 }
 .aprs-bar-frame {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;