[style](trx-frontend): rebalance aprs overlay title spacing

Tighten the spacing inside the APRS title while adding more room
between the title and the clear action.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
This commit is contained in:
2026-03-01 15:33:32 +01:00
parent 1ae44a714f
commit 8c6c370563
2 changed files with 6 additions and 2 deletions
@@ -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"><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>';
let html = '<div class="aprs-bar-header"><span class="aprs-bar-title"><span class="aprs-bar-title-word">APRS</span><span class="aprs-bar-title-word">Live</span></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>`;
@@ -656,7 +656,7 @@ small { color: var(--text-muted); }
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.14rem;
gap: 0.32rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: clamp(0.6rem, 0.9vw, 0.75rem);
font-weight: 700;
@@ -671,9 +671,13 @@ small { color: var(--text-muted); }
.aprs-bar-title {
display: inline-flex;
align-items: center;
gap: 0.1rem;
min-width: 0;
flex: 0 0 auto;
}
.aprs-bar-title-word {
display: inline-block;
}
.aprs-bar-clear-wrap {
display: inline-flex;
align-items: center;