[feat](trx-frontend-http): refine responsive main and map layout

Adjust responsive behavior and interaction details in the HTTP frontend.\n\n- switch signal measurement from sample-based to time-based averaging\n- move Transmit/Power below Mode+Tune on small viewports\n- add practical mobile breakpoints and width handling\n- resize and tune logo/top spacing/layout placement\n- make map height viewport-aware with adjustable minimum\n- improve FT8/WSPR control wrapping on small screens\n\nCo-authored-by: OpenAI Codex <codex@openai.com>

Signed-off-by: Stanislaw Grams <stanislawgrams@gmail.com>

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

@@ -839,9 +839,10 @@ const mapMarkers = new Set();
 const mapFilter = { aprs: true, ft8: true };
 
 function initAprsMap() {
-  if (aprsMap) return;
   const mapEl = document.getElementById("aprs-map");
   if (!mapEl) return;
+  sizeAprsMapToViewport();
+  if (aprsMap) return;
 
   const hasLocation = serverLat != null && serverLon != null;
   const center = hasLocation ? [serverLat, serverLon] : [20, 0];
@@ -876,6 +877,16 @@ function initAprsMap() {
   }
 }
 
+function sizeAprsMapToViewport() {
+  const mapEl = document.getElementById("aprs-map");
+  if (!mapEl) return;
+  const topPadding = parseFloat(getComputedStyle(document.body).paddingTop) || 0;
+  const available = Math.max(0, window.innerHeight - topPadding);
+  const target = Math.max(150, Math.floor(available * 0.6));
+  mapEl.style.height = `${target}px`;
+  if (aprsMap) aprsMap.invalidateSize();
+}
+
 function aprsSymbolIcon(symbolTable, symbolCode) {
   if (!symbolTable || !symbolCode) return null;
   const sheet = symbolTable === "/" ? 0 : 1;
@@ -985,11 +996,18 @@ document.querySelectorAll(".sub-tab-bar").forEach((bar) => {
     parent.querySelector(`#subtab-${btn.dataset.subtab}`).style.display = "";
     if (btn.dataset.subtab === "map") {
       initAprsMap();
+      sizeAprsMapToViewport();
       if (aprsMap) setTimeout(() => aprsMap.invalidateSize(), 50);
     }
   });
 });
 
+window.addEventListener("resize", () => {
+  const mapTab = document.getElementById("subtab-map");
+  if (!mapTab || mapTab.style.display === "none") return;
+  sizeAprsMapToViewport();
+});
+
 // --- Signal measurement ---
 const sigMeasureBtn = document.getElementById("sig-measure-btn");
 const sigClearBtn = document.getElementById("sig-clear-btn");

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

@@ -61,7 +61,7 @@
             <button id="jog-up" type="button" class="jog-btn">+</button>
           </div>
         </div>
-        <div class="controls-col">
+        <div class="controls-col controls-col-power">
           <div class="label">Transmit / Power</div>
           <div class="btn-grid">
             <button id="ptt-btn" type="button">Toggle PTT</button>

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

@@ -14,8 +14,8 @@
   --accent-red: #e55353;
 }
 
-body { font-family: sans-serif; margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); color: var(--text); }
-.card { border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.75rem; width: min(680px, 90vw); box-shadow: 0 12px 40px rgba(0,0,0,0.35); background: var(--card-bg); }
+body { font-family: sans-serif; margin: 0; min-height: 100vh; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: center; padding-top: 2em; background: var(--bg); color: var(--text); }
+.card { border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem 1.75rem; width: 60vw; box-shadow: 0 12px 40px rgba(0,0,0,0.35); background: var(--card-bg); }
 .label { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 6px; display: block; }
 .status { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.1rem 1rem; }
 input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem; font-size: 1rem; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); color: var(--text); }
@@ -144,7 +144,7 @@ button:disabled { opacity: 0.6; cursor: not-allowed; }
 small { color: var(--text-muted); }
 .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
 .title { font-size: 1.4rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.35rem; }
-.header-logo { height: 10em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
+.header-logo { height: 6em; width: auto; flex-shrink: 0; filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35)); }
 .subtitle { color: var(--text-muted); font-size: 0.95rem; }
 .subtitle a { color: var(--accent-green); text-decoration: none; }
 .subtitle a:hover { text-decoration: underline; }
@@ -222,7 +222,7 @@ small { color: var(--text-muted); }
 .sub-tab { background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.35rem 0.75rem; color: var(--text-muted); cursor: pointer; font-size: 0.85rem; height: auto; }
 .sub-tab.active { border-bottom-color: var(--accent-green); color: var(--accent-green); font-weight: 600; }
 .sub-tab:hover:not(.active) { color: var(--text); }
-#aprs-map { height: 400px; border-radius: 6px; }
+#aprs-map { min-height: 150px; border-radius: 6px; }
 .aprs-controls { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.75rem; }
 #aprs-packets { max-height: 360px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 6px; background: var(--input-bg); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
 .aprs-packet { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 0.82rem; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); line-height: 1.4; }
@@ -265,11 +265,18 @@ button:focus-visible, input:focus-visible, select:focus-visible {
   outline-offset: 2px;
 }
 
-@media (max-width: 480px) {
+@media (max-width: 900px) {
+  .card { width: 90vw; }
+}
+
+@media (max-width: 760px) {
   .card { padding: 1rem; }
   button { min-height: 2.8rem; font-size: 0.95rem; }
   input.status-input, select.status-input { font-size: 1.1rem; }
-  .controls-row { grid-template-columns: 1fr; }
+  .controls-row { grid-template-columns: 1fr auto; }
+  .controls-col-power { grid-column: 1 / -1; }
+  .ft8-controls { flex-wrap: wrap; }
+  #ft8-decode-toggle-btn, #wspr-decode-toggle-btn { white-space: nowrap; }
   .jog-container { flex-wrap: wrap; }
   .vfo-picker { flex-direction: column; }
   .vfo-picker button { border-right: none; border-bottom: 1px solid var(--border-light); }