From 816780aa6b0b4f1d28de3923690c4bbdf364ae33 Mon Sep 17 00:00:00 2001
From: Stan Grams <sjg@haxx.space>
Date: Sun, 1 Mar 2026 10:25:52 +0100
Subject: [PATCH] [fix](trx-frontend): compact wfm controls layout

Align the WFM options into a concise control strip with consistent sizes and spacing in the main window.

Co-authored-by: OpenAI Codex <codex@openai.com>
Signed-off-by: Stan Grams <sjg@haxx.space>
---
 .../trx-frontend-http/assets/web/index.html   | 14 +++--
 .../trx-frontend-http/assets/web/style.css    | 55 +++++++++++++------
 2 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
index a13a2af..9f80802 100644
--- a/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
+++ b/src/trx-client/trx-frontend/trx-frontend-http/assets/web/index.html
@@ -153,25 +153,29 @@
               </div>
               <div class="controls-col controls-col-wfm label-below-col" id="wfm-controls-col" style="display:none;">
                 <div class="inline wfm-controls-inline">
-                  <label class="wfm-control">Deemphasis
+                  <label class="wfm-control">
+                    <span class="wfm-control-label">Deemp</span>
                     <select id="wfm-deemphasis" class="status-input">
                       <option value="50">50 uS</option>
                       <option value="75">75 uS</option>
                     </select>
                   </label>
-                  <label class="wfm-control">Audio
+                  <label class="wfm-control">
+                    <span class="wfm-control-label">Audio</span>
                     <select id="wfm-audio-mode" class="status-input">
                       <option value="stereo">Stereo</option>
                       <option value="mono">Mono</option>
                     </select>
                   </label>
-                  <div class="inline" id="sdr-gain-controls">
-                    <label class="wfm-control">RF Gain
+                  <div class="wfm-gain-group" id="sdr-gain-controls">
+                    <label class="wfm-control">
+                      <span class="wfm-control-label">RF Gain</span>
                       <input id="sdr-gain-db" class="status-input" type="number" min="0" max="60" step="1" inputmode="decimal">
                     </label>
-                    <button id="sdr-gain-set" type="button" class="status-input">Set</button>
+                    <button id="sdr-gain-set" type="button" class="wfm-inline-btn">Set</button>
                   </div>
                   <label class="wfm-control wfm-st-flag-wrap" aria-label="Stereo pilot status">
+                    <span class="wfm-control-label">Pilot</span>
                     <span id="wfm-st-flag" class="wfm-st-flag wfm-st-flag-mono">MO</span>
                   </label>
                 </div>
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 9095153..d8fbaad 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
@@ -171,31 +171,53 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   justify-content: flex-start;
 }
 .wfm-controls-inline {
-  gap: 0.6rem;
+  gap: 0.45rem;
   justify-content: flex-start;
+  align-items: flex-end;
+  flex-wrap: wrap;
 }
 .wfm-control {
   display: flex;
-  align-items: center;
-  gap: 0.35rem;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.22rem;
   color: var(--text-muted);
-  font-size: 0.85rem;
+  font-size: 0.72rem;
+  line-height: 1.1;
   white-space: nowrap;
 }
+.wfm-control-label {
+  font-size: 0.68rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
 .wfm-control .status-input {
-  min-width: 4.6rem;
+  min-width: 4.4rem;
   width: auto;
-  font-size: 0.9rem;
-}
-.wfm-control input.status-input {
-  width: 5rem;
-}
-.wfm-control button.status-input {
-  padding: 0.45rem 0.5rem;
-  height: auto;
+  height: 2.1rem;
+  padding: 0.28rem 0.45rem;
+  font-size: 0.85rem;
   line-height: 1.2;
   box-sizing: border-box;
 }
+.wfm-control input.status-input {
+  width: 4.25rem;
+}
+.wfm-gain-group {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.35rem;
+}
+.wfm-inline-btn {
+  min-width: 3rem;
+  height: 2.1rem;
+  padding: 0 0.6rem;
+  font-size: 0.8rem;
+  line-height: 1.1;
+  flex-shrink: 0;
+}
 .wfm-st-flag-wrap {
   min-width: 0;
 }
@@ -203,12 +225,13 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 2.35rem;
-  padding: 0.45rem 0.5rem;
+  min-width: 2.7rem;
+  min-height: 2.1rem;
+  padding: 0.28rem 0.5rem;
   box-sizing: border-box;
   border: 1px solid var(--border-light);
   border-radius: 6px;
-  font-size: 0.9rem;
+  font-size: 0.82rem;
   font-weight: 800;
   line-height: 1.2;
   letter-spacing: 0.04em;