From 17a643d070015fcb5d69a0ebf227769add5c2ef8 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sun, 1 Mar 2026 15:16:20 +0100
Subject: [PATCH] [style](trx-frontend): polish aprs overlay clear control

Wrap the APRS overlay clear action in a styled span and place it
next to the APRS title for a tighter header layout.

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    | 25 ++++++++++++++-----
 2 files changed, 20 insertions(+), 7 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 f31d8b1..43b3741 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><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></div>';
+  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>';
   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 abca781..c1b01e4 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
@@ -655,7 +655,7 @@ small { color: var(--text-muted); }
   -webkit-backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 0.35rem;
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   font-size: clamp(0.46rem, 0.72vw, 0.58rem);
@@ -672,15 +672,26 @@ small { color: var(--text-muted); }
   display: inline-flex;
   align-items: center;
   min-width: 0;
+  flex: 0 0 auto;
+}
+.aprs-bar-clear-wrap {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  padding: 0.02rem 0.3rem 0.03rem;
+  border: 1px solid color-mix(in srgb, var(--border-light) 46%, transparent);
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--btn-bg) 84%, transparent);
+  box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 6%, transparent);
 }
 .aprs-bar-clear {
   display: inline-flex;
   align-items: center;
   gap: 0.18rem;
-  background: color-mix(in srgb, var(--btn-bg) 84%, transparent);
-  border: 1px solid color-mix(in srgb, var(--border-light) 46%, transparent);
-  border-radius: 4px;
-  padding: 0.02rem 0.3rem 0.03rem;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 0;
   line-height: 1.05;
   font-family: inherit;
   font-size: 0.62em;
@@ -695,9 +706,11 @@ small { color: var(--text-muted); }
 }
 .aprs-bar-clear:hover {
   opacity: 1;
+  color: var(--text-heading);
+}
+.aprs-bar-clear-wrap:hover {
   background: color-mix(in srgb, var(--btn-bg) 94%, transparent);
   border-color: color-mix(in srgb, var(--accent-green) 28%, var(--border-light));
-  color: var(--text-heading);
 }
 .aprs-bar-clear-icon {
   display: inline-flex;