[fix](trx-frontend-http): scope server-lost overlay to content area, keep header accessible

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/app.js

@@ -408,10 +408,11 @@ function setDecodeHistoryOverlayVisible(visible, title = "", sub = "") {
   decodeHistoryOverlayEl.classList.toggle("is-hidden", !visible);
 }
 
-function setConnLostOverlay(visible, title = "Connection lost", sub = "Retrying\u2026") {
+function setConnLostOverlay(visible, title = "Connection lost", sub = "Retrying\u2026", fullscreen = false) {
   if (!connLostOverlayEl) return;
   if (connLostOverlayTitleEl) connLostOverlayTitleEl.textContent = title;
   if (connLostOverlaySubEl) connLostOverlaySubEl.textContent = sub;
+  connLostOverlayEl.classList.toggle("conn-lost-fullscreen", fullscreen);
   connLostOverlayEl.classList.toggle("is-hidden", !visible);
 }
 const decodeHistoryTextDecoder = typeof TextDecoder === "function" ? new TextDecoder() : null;
@@ -3362,7 +3363,7 @@ function connect() {
     // Check if this is an auth error by looking at readyState
     if (es.readyState === EventSource.CLOSED) {
       powerHint.textContent = "trx-client connection lost, retrying\u2026";
-      setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026");
+      setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026", true);
       es.close();
       pollFreshSnapshot();
       scheduleReconnect(1000);
@@ -3373,7 +3374,7 @@ function connect() {
     const now = Date.now();
     if (now - lastEventAt > 15000) {
       powerHint.textContent = "trx-client connection lost, retrying\u2026";
-      setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026");
+      setConnLostOverlay(true, "trx-client connection lost", "Retrying\u2026", true);
       es.close();
       pollFreshSnapshot();
       scheduleReconnect(250);

src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html

@@ -1036,6 +1036,12 @@
       </div>
       <div class="hint" id="power-hint">Connecting…</div>
     </div>
+    <div id="conn-lost-overlay" class="decode-history-overlay content-overlay is-hidden" aria-live="assertive" aria-atomic="true">
+      <div class="decode-history-overlay-card">
+        <div id="conn-lost-overlay-title" class="decode-history-overlay-title">Connection lost</div>
+        <div id="conn-lost-overlay-sub" class="decode-history-overlay-sub">Retrying…</div>
+      </div>
+    </div>
   </div>
   <div id="decode-history-overlay" class="decode-history-overlay is-hidden" aria-live="polite" aria-atomic="true">
     <div class="decode-history-overlay-card">
@@ -1043,12 +1049,6 @@
       <div id="decode-history-overlay-sub" class="decode-history-overlay-sub">Preparing recent decodes for the UI</div>
     </div>
   </div>
-  <div id="conn-lost-overlay" class="decode-history-overlay is-hidden" aria-live="assertive" aria-atomic="true">
-    <div class="decode-history-overlay-card">
-      <div id="conn-lost-overlay-title" class="decode-history-overlay-title">Connection lost</div>
-      <div id="conn-lost-overlay-sub" class="decode-history-overlay-sub">Retrying…</div>
-    </div>
-  </div>
   <script src="/webgl-renderer.js"></script>
   <script src="/app.js"></script>
   <script src="/ais.js"></script>

src/trx-client/trx-frontend/trx-frontend-http/assets/web/style.css

@@ -1142,7 +1142,7 @@ small { color: var(--text-muted); }
 .meter-bar { flex: 1 1 auto; height: 12px; border-radius: 999px; background: var(--btn-bg); border: 1px solid var(--border-light); overflow: hidden; }
 .meter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-green), var(--accent-yellow), var(--accent-red)); transition: width 150ms ease; }
 .meter-value { font-size: 0.95rem; color: var(--text-heading); min-width: 64px; text-align: right; }
-#content { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; flex: 1 1 auto; overflow: visible; }
+#content { display: flex; flex-direction: column; gap: 1.1rem; min-height: 0; flex: 1 1 auto; overflow: visible; position: relative; }
 .tab-panel { flex: 1 1 auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
 .sub-tab-panel { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
 .tab-bar {
@@ -1340,6 +1340,14 @@ small { color: var(--text-muted); }
   opacity: 0;
   visibility: hidden;
 }
+.decode-history-overlay.content-overlay {
+  position: absolute;
+  border-radius: 0 0 0.9rem 0.9rem;
+}
+.decode-history-overlay.content-overlay.conn-lost-fullscreen {
+  position: fixed;
+  border-radius: 0;
+}
 .decode-history-overlay-card {
   min-width: min(26rem, calc(100vw - 2.4rem));
   max-width: min(30rem, calc(100vw - 2.4rem));