[feat](trx-frontend-http): rebuild the general radio controls row

Mode was a full-width select: 483px of the row to display "FM".  The
modes are three or four characters and there are at most twelve, so they
become a segmented group like the Unit and Step Scale pickers beside
them — a third of the width, and one click instead of two.

The <select> stays as the mode's value.  A dozen call sites and several
plugins read #mode.value, so replacing it outright would have reached
much further than a layout change should; it is hidden from sight and
from assistive tech, the buttons write to it, and everything downstream
runs unchanged.  Every writer re-syncs the buttons, the plugins through
a new trxCore.syncModePicker.

The row itself was a grid with a track per column, but the WFM, SAM and
transmit columns are hidden on most rigs, so it ended in some 500px of
hole.  It packs left now.  Same fault one level down: the power buttons
sat in three fixed tracks, so a rig with neither transmit nor lock kept
two empty ones and left its label chip stranded at the far edge.

Unit and Step Scale move out of the frequency row and in beside the
wheel and the +/- they modify, which were some 600px away.

Signed-off-by: Stan Grams <sjg@haxx.space>

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

@@ -272,11 +272,14 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   -webkit-text-fill-color: currentColor;
 }
 #center-freq { color: var(--wavelength-fg); }
+/* Packs left. As a grid it held a track for every column, but the WFM, SAM and
+   transmit columns are hidden on most rigs, so the row ended in a hole of dead
+   space and the power buttons' label chip floated far from the buttons. */
 .controls-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
-  gap: 1rem;
-  align-items: start;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem 1.25rem;
+  align-items: flex-start;
 }
 .controls-col {
   min-width: 0;
@@ -304,10 +307,74 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   width: 100%;
   margin-top: calc((var(--jog-wheel-size) - var(--control-height)) / 2);
 }
+/* Mode: a segmented group sized by its content. As a full-width select it took
+   483px of the row to show "FM"; the modes are all three or four characters and
+   there are at most twelve of them, so they fit two rows in a third of that. */
+.controls-col-mode {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+/* Specific enough to beat .controls-col.label-below-col .inline, whose offset
+   assumes a --control-height field: the picker and the step groups are both
+   3.35rem, so they line up with each other beside the wheel. */
+.controls-col-mode.label-below-col .inline {
+  width: auto;
+  margin-top: calc((var(--jog-wheel-size) - 3.35rem) / 2);
+}
+.mode-picker {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1px;
+  width: max-content;
+  max-width: 22rem;
+  border: 1px solid var(--border-light);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--border-light);
+}
+.mode-picker button {
+  flex: 1 0 3.2rem;
+  border: none;
+  border-radius: 0;
+  min-height: 1.65rem;
+  height: auto;
+  padding: 0.32rem 0.55rem;
+  font-size: 0.82rem;
+  font-weight: 600;
+  background: var(--input-bg);
+  color: var(--text-muted);
+  cursor: pointer;
+}
+.mode-picker button:hover:not(:disabled):not(.active) {
+  color: var(--text);
+  background: var(--btn-hover-bg);
+}
+.mode-picker button.active {
+  background: var(--btn-bg);
+  color: var(--accent-green);
+}
+.mode-picker button:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+/* Tune step: the unit and the scale drive the wheel and the +/- beside it, so
+   they sit with it rather than up in the frequency row. */
+.controls-col-step {
+  flex: 0 0 auto;
+}
+.step-controls-inline {
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  margin-top: calc((var(--jog-wheel-size) - 3.35rem) / 2);
+}
+.step-controls-inline .label {
+  justify-content: flex-start;
+}
 .controls-col-center {
-  justify-self: center;
   width: auto;
   align-items: center;
+  flex: 0 0 auto;
 }
 .controls-col-wfm.label-below-col .label {
   justify-content: flex-start;
@@ -449,12 +516,15 @@ input.status-input, select.status-input { width: 100%; padding: 0.45rem 0.5rem;
   align-self: stretch;
 }
 .controls-col .jog-container { align-self: center; }
+/* Sized by the buttons that are actually there. Three fixed tracks meant a rig
+   without transmit or lock kept two empty ones, leaving its label chip stranded
+   at the far edge of the group. */
 .btn-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
-.btn-grid button { width: 100%; height: var(--control-height); }
+.btn-grid button { flex: 0 1 auto; min-width: 6rem; height: var(--control-height); }
 .jog-container {
   display: flex;
   align-items: center;
@@ -3180,9 +3250,6 @@ body[data-operator-layout="broadcast"] #sam-controls-col,
 body[data-operator-layout="broadcast"] #advanced-radio-controls {
   display: none !important;
 }
-body[data-operator-layout="broadcast"] .controls-row {
-  grid-template-columns: minmax(8rem, 0.65fr) auto minmax(20rem, 2fr);
-}
 body[data-operator-layout="broadcast"] #wfm-controls-col,
 body[data-operator-layout="broadcast"] #audio-row,
 body[data-operator-layout="broadcast"] #spectrum-bw-row {
@@ -3213,8 +3280,7 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
   display: none !important;
 }
 @media (max-width: 760px) {
-  body[data-operator-layout="broadcast"] .controls-row { grid-template-columns: 1fr auto; }
-  body[data-operator-layout="broadcast"] #wfm-controls-col { grid-column: 1 / -1; }
+  body[data-operator-layout="broadcast"] #wfm-controls-col { flex-basis: 100%; }
 }
 /* One navigation model at every width.  Statistics, Recorder, Settings and
  * About are occasional destinations: they live behind More rather than
@@ -3339,9 +3405,8 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
     height: 1rem;
     cursor: ew-resize;
   }
-  .controls-row { grid-template-columns: 1fr auto; }
-  .controls-col-wfm { grid-column: 1 / -1; }
-  .controls-col-power { grid-column: 1 / -1; }
+  .controls-col-wfm { flex-basis: 100%; }
+  .controls-col-power { flex-basis: 100%; }
   .controls-col.label-below-col .inline,
   .controls-col.label-below-col .btn-grid { margin-top: 0; }
   .wfm-controls-inline { flex-wrap: wrap; }
@@ -4322,11 +4387,12 @@ body[data-operator-layout="broadcast"] #cw-bar-overlay {
 @media (max-width: 520px) {
   /* Single-column controls: jog first, then mode, then power */
   .controls-row {
-    grid-template-columns: 1fr;
+    flex-direction: column;
+    align-items: stretch;
   }
   .controls-col-center {
     order: -1;
-    justify-self: center;
+    align-self: center;
     width: auto;
   }
   .controls-col-center::after { display: none; }