[fix](trx-frontend-http): fix FT4/FT2/WSPR message container styling and cap DOM rows

Apply #ft8-messages container style (border, rounded corners, monospace
font, max-height with scroll) to #ft4-messages, #ft2-messages, and
#wspr-messages which were missing it.

Add #ft4-decode-toggle-btn and #ft2-decode-toggle-btn to the narrow-
screen white-space:nowrap media query rule alongside FT8/WSPR.

Cap DOM rows rendered per history view to 200 (FT8_MAX_DOM_ROWS,
FT4_MAX_DOM_ROWS, FT2_MAX_DOM_ROWS). Full history is retained in
memory; only the DOM representation is bounded. This prevents tab
switching from becoming sluggish after a long decode session where
thousands of rows accumulate in the DOM.

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

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft2.js

@@ -13,6 +13,7 @@ const ft2PeriodEl = document.getElementById("ft2-period");
 const ft2MessagesEl = document.getElementById("ft2-messages");
 const ft2FilterInput = document.getElementById("ft2-filter");
 const FT2_PERIOD_MS = 3750;
+const FT2_MAX_DOM_ROWS = 200;
 let ft2FilterText = "";
 let ft2MessageHistory = [];
 
@@ -80,10 +81,12 @@ function renderFt2History() {
   if (!ft2MessagesEl) return;
   const filter = ft2FilterText;
   const fragment = document.createDocumentFragment();
-  for (let i = 0; i < ft2MessageHistory.length; i++) {
+  let rendered = 0;
+  for (let i = 0; i < ft2MessageHistory.length && rendered < FT2_MAX_DOM_ROWS; i++) {
     const msg = ft2MessageHistory[i];
     if (filter && !(msg.message || "").toString().toUpperCase().includes(filter)) continue;
     fragment.appendChild(renderFt2Row(msg));
+    rendered++;
   }
   ft2MessagesEl.replaceChildren(fragment);
 }

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft4.js

@@ -13,6 +13,7 @@ const ft4PeriodEl = document.getElementById("ft4-period");
 const ft4MessagesEl = document.getElementById("ft4-messages");
 const ft4FilterInput = document.getElementById("ft4-filter");
 const FT4_PERIOD_MS = 7500;
+const FT4_MAX_DOM_ROWS = 200;
 let ft4FilterText = "";
 let ft4MessageHistory = [];
 
@@ -80,10 +81,12 @@ function renderFt4History() {
   if (!ft4MessagesEl) return;
   const filter = ft4FilterText;
   const fragment = document.createDocumentFragment();
-  for (let i = 0; i < ft4MessageHistory.length; i++) {
+  let rendered = 0;
+  for (let i = 0; i < ft4MessageHistory.length && rendered < FT4_MAX_DOM_ROWS; i++) {
     const msg = ft4MessageHistory[i];
     if (filter && !(msg.message || "").toString().toUpperCase().includes(filter)) continue;
     fragment.appendChild(renderFt4Row(msg));
+    rendered++;
   }
   ft4MessagesEl.replaceChildren(fragment);
 }

src/trx-client/trx-frontend/trx-frontend-http/assets/web/plugins/ft8.js

@@ -6,6 +6,7 @@ const ft8FilterInput = document.getElementById("ft8-filter");
 const ft8BarOverlay = document.getElementById("ft8-bar-overlay");
 const FT8_BAR_WINDOW_MS = 15 * 60 * 1000;
 const FT8_PERIOD_SECONDS = 15;
+const FT8_MAX_DOM_ROWS = 200;
 const FT8_BAR_DECODER_LABELS = {
   ft8: "FT8",
   ft4: "FT4",
@@ -105,7 +106,8 @@ function renderFt8History() {
   pruneFt8MessageHistory();
   if (!ft8MessagesEl) return;
   const fragment = document.createDocumentFragment();
-  for (let i = 0; i < ft8MessageHistory.length; i += 1) {
+  const limit = Math.min(ft8MessageHistory.length, FT8_MAX_DOM_ROWS);
+  for (let i = 0; i < limit; i += 1) {
     fragment.appendChild(renderFt8Row(ft8MessageHistory[i]));
   }
   ft8MessagesEl.replaceChildren(fragment);