[style](trx-frontend-http): name and fence the three audio groups

The row carries three unrelated things — how loud it is, whether there
is any audio at all, and how much is arriving — and only the middle one
was named.  Each is a group now: VOLUME over the two sliders, SQL on its
own switch, LEVEL over the meter, with a hairline between each.

The rules are drawn only while the row is one line, measured against the
row rather than the viewport: what fits depends on whether the rig
transmits and whether it has a squelch at all.  A rule divides what sits
either side of it, so once a group wraps the wrap is the division and
the rule would just be a mark at the start of a line — which is what it
was at 900px before this.  The labels carry the grouping on their own
below that width, and the groups stack whole on a phone.

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

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

@@ -413,17 +413,23 @@ SPDX-License-Identifier: GPL-2.0-or-later
                   <div class="inline" style="gap: 0.6rem; flex-wrap: wrap; align-items: center;">
                     <button id="rx-audio-btn" type="button">Play Audio</button>
                     <button id="tx-audio-btn" type="button">Transmit Audio</button>
-                    <label class="vol-label">RX<input type="range" id="rx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="rx-vol-pct">80%</small></label>
-                    <label class="vol-label">TX<input type="range" id="tx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="tx-vol-pct">80%</small></label>
+                    <span class="audio-group audio-volume-group">
+                      <span class="audio-group-label">Volume</span>
+                      <label class="vol-label">RX<input type="range" id="rx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="rx-vol-pct">80%</small></label>
+                      <label class="vol-label">TX<input type="range" id="tx-vol" min="0" max="100" value="80" class="vol-slider" /><small class="vol-pct" id="tx-vol-pct">80%</small></label>
+                    </span>
                     <span class="sql-control" id="sdr-squelch-wrap" style="display:none;">
                       <button id="sdr-squelch-toggle" type="button" class="sql-toggle" aria-pressed="false" title="Turn the squelch on or off"><span class="sql-state" id="sdr-squelch-state" data-state="off" aria-hidden="true"></span>SQL</button>
                       <label class="sql-db"><input type="number" id="sdr-squelch-db" min="-120" max="-30" step="1" value="-95" inputmode="numeric" aria-label="Squelch threshold in dB" /><span class="sql-db-unit">dB</span></label>
                       <button id="sdr-squelch-auto" type="button" class="sql-auto-btn" title="Set the threshold just above the noise floor">Auto</button>
                     </span>
-                    <div id="audio-level">
-                      <div id="audio-level-fill"></div>
-                    </div>
-                    <small id="audio-status" style="min-width: 60px;">Off</small>
+                    <span class="audio-group audio-level-group">
+                      <span class="audio-group-label">Level</span>
+                      <div id="audio-level">
+                        <div id="audio-level-fill"></div>
+                      </div>
+                      <small id="audio-status">Off</small>
+                    </span>
                   </div>
                 </div>
               </div>