[style](trx-frontend-http): make the spectrum control strip one strip

The row of controls under the plot held four different control heights,
units as loose text beside the field they belonged to, and a quarter of
its width as a hole in the middle.  Between about 1100 and 1400 px it
came apart: the bandwidth cluster wrapped to two lines while the level
cluster stayed on one, so the two sat at heights that matched neither
each other nor anything else on the page.

Every control stays, in its order, with its name and its behaviour.
This is the styling and the layout.

A field is now one box -- name, value and unit inside a single border --
so a number cannot be read apart from the unit it is in.  Fields,
buttons, the peak-hold select and the contrast slider are one height,
border-box so a button's own border cannot add two pixels to it, and
2.4rem under a coarse pointer where a fingertip needs the room.  The
contrast readout holds a fixed, tabular slot, so the row no longer
twitches between 1.0 and 0.9.

The container wraps and a cluster does not: a cluster that will not fit
drops whole to the next line and starts it left-aligned.  The slack
goes to a spacer rather than to `space-between`, which is what opened
the hole.

Two things this turned up.  The select carries `status-input` for other
layouts' sake, which drew a box inside the field's box.  And the narrow
-screen rules lived in a media query earlier in the file than the rules
they override -- identical specificity, so the later one won and the
phone layout had been overflowing sideways rather than stacking.  The
narrow rules now sit directly after what they override.

The layout test measures the strip at three widths: one height across
every control, no overflow, inside the plot, and clusters either
sharing a line or each having one -- never one floating against the
middle of the other.

docs/Spectrum-Controls-Rework.md records what was wrong and what was
deliberately left alone: the two different Autos, the settings that do
not persist, the one-shot buttons, and Sweet-spot's silence while it
retunes the SDR.  Those are behaviour, and are for another day.

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

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/spectrum-layout.mjs

@@ -196,6 +196,62 @@ try {
   await fixture.close();
 }
 
+// The strip of controls under the plot. Its two clusters — the receiver's
+// bandwidth and the display's levels — used to size themselves independently:
+// four control heights on one line, and between about 1100 and 1400 px the
+// left cluster wrapped to two lines while the right one did not, leaving the
+// two at heights that matched neither each other nor anything else.
+const stripFixture = await startWebFixture({ spectrum: true });
+const strip = await startBrowser(chromium);
+try {
+  for (const width of [1600, 1200, 900]) {
+    await strip.page.setViewportSize({ width, height: 950 });
+    await strip.page.goto(stripFixture.origin, { waitUntil: "domcontentloaded" });
+    await strip.page.locator("#spectrum-panel").waitFor({ state: "visible" });
+    await strip.page.waitForTimeout(1600);
+
+    const measured = await strip.page.evaluate(() => {
+      const controls = document.getElementById("spectrum-controls");
+      const box = (element) => element.getBoundingClientRect();
+      const clusters = [...controls.children]
+        .filter((child) => child.id)
+        .map((child) => ({ id: child.id, top: Math.round(box(child).top) }));
+      const parts = [...controls.querySelectorAll(".spectrum-field, .spectrum-btn")];
+      return {
+        heights: [...new Set(parts.map((part) => Math.round(box(part).height)))],
+        count: parts.length,
+        clusters,
+        // Rows are lines of the strip: clusters sharing a top are on one line.
+        lines: new Set(clusters.map((cluster) => cluster.top)).size,
+        overflows: controls.scrollWidth > controls.clientWidth + 1,
+        insidePanel: box(controls).right
+          <= box(document.getElementById("spectrum-panel")).right + 1,
+      };
+    });
+
+    // Five fields and four buttons: bandwidth, Set, Auto BW, Sweet-spot, peak
+    // hold, floor, range, Auto, contrast.
+    assert.equal(measured.count, 9, `the strip has ${measured.count} controls at ${width}px`);
+    assert.deepEqual(measured.heights.length, 1,
+      `controls are ${measured.heights.join(", ")}px tall at ${width}px`);
+    assert.equal(measured.overflows, false, `the strip overflows at ${width}px`);
+    assert.equal(measured.insidePanel, true, `the strip runs past the plot at ${width}px`);
+
+    // Either both clusters share a line, or each has one to itself. What must
+    // never happen is one cluster floating against the middle of the other.
+    const tops = measured.clusters.map((cluster) => cluster.top);
+    assert.ok(
+      measured.lines === 1 || measured.lines === measured.clusters.length,
+      `clusters sit at ${tops.join(", ")} at ${width}px`,
+    );
+  }
+
+  assert.deepEqual(strip.runtimeErrors, []);
+} finally {
+  await strip.browser.close();
+  await stripFixture.close();
+}
+
 // The band plan is fetched once at startup, which can land before the session
 // exists. It used to fail silently and never retry, so the allocations only
 // turned up if the operator reloaded the page by hand.