Spectrum control strip: one height, fields that hold their units, no staggering #45

2026-08-06T01:09:06+02:00

sjg commented

2026-08-06 01:09:06 +02:00

The row of controls under the spectrum, restyled. Every control stays, in its order, with its name and its behaviour — this is layout and styling only. Set, Auto BW, Auto and Sweet-spot all work exactly as before.

What was wrong

Four control heights on one line. Bare number inputs, buttons, the select and the range slider were each sized by their own rule, so nothing shared a baseline.
Units as loose text. kHz, dB, dB sat outside the control they belonged to, separated by the same gap that separated unrelated controls.
A quarter of the strip was a hole. space-between put ~250px of nothing in the middle at 1600px.
The clusters staggered between 1100 and 1400px — the bandwidth cluster wrapped to two lines while the level cluster stayed on one, floating at a height that matched neither. This was the worst of it, at a common window width.

What changed

A field is one box: name, value and unit inside a single border, so a number cannot be read apart from its unit.
One height for fields, buttons, select and slider — box-sizing: border-box so a button's own border cannot add two pixels — and 2.4rem under a coarse pointer.
The container wraps; a cluster does not. A cluster that will not fit drops whole to the next line, left-aligned. The slack goes to a spacer instead of space-between.
The contrast readout gets a fixed, tabular slot, so the row stops twitching between 1.0 and 0.9.

Two things this turned up

The peak-hold select carries status-input for other layouts' sake, which drew a box inside the field's box; it is now stripped inside a field.
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: the phone layout had been overflowing sideways rather than stacking. Moving the narrow block below the base rules fixes a bug that predates this change.

Testing

spectrum-layout.mjs measures the strip at 1600, 1200 and 900px: one height across all nine controls, no overflow, inside the plot, and clusters either sharing a line or each having one to itself — never one floating against the middle of the other. That last assertion is the staggering bug, pinned directly.

Checked by eye in light and dark, at 1600/1200/900/420px, and in the broadcast operator layout whose green highlight still frames the bandwidth cluster.

Frontend typecheck, lint, 42 unit tests and all four browser suites pass; cargo fmt --check clean; app.ts untouched and every id preserved, so handlers and the broadcast highlight keep working.

docs/Spectrum-Controls-Rework.md records the analysis, including what was deliberately not touched: the two different Autos, floor/range/contrast not persisting, the one-shot buttons, and Sweet-spot's silence while it retunes the SDR. Those are behaviour, for another day.

The row of controls under the spectrum, restyled. **Every control stays, in its order, with its name and its behaviour** — this is layout and styling only. `Set`, `Auto BW`, `Auto` and `Sweet-spot` all work exactly as before. ## What was wrong - **Four control heights on one line.** Bare number inputs, buttons, the `select` and the range slider were each sized by their own rule, so nothing shared a baseline. - **Units as loose text.** `kHz`, `dB`, `dB` sat outside the control they belonged to, separated by the same gap that separated unrelated controls. - **A quarter of the strip was a hole.** `space-between` put ~250px of nothing in the middle at 1600px. - **The clusters staggered between 1100 and 1400px** — the bandwidth cluster wrapped to two lines while the level cluster stayed on one, floating at a height that matched neither. This was the worst of it, at a common window width. ## What changed - A **field is one box**: name, value and unit inside a single border, so a number cannot be read apart from its unit. - **One height** for fields, buttons, select and slider — `box-sizing: border-box` so a button's own border cannot add two pixels — and 2.4rem under a coarse pointer. - **The container wraps; a cluster does not.** A cluster that will not fit drops whole to the next line, left-aligned. The slack goes to a spacer instead of `space-between`. - The contrast readout gets a **fixed, tabular slot**, so the row stops twitching between `1.0` and `0.9`. ## Two things this turned up - The peak-hold `select` carries `status-input` for other layouts' sake, which drew a **box inside the field's box**; it is now stripped inside a field. - 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: the phone layout had been overflowing sideways rather than stacking. Moving the narrow block below the base rules fixes a bug that predates this change. ## Testing `spectrum-layout.mjs` measures the strip at 1600, 1200 and 900px: one height across all nine controls, no overflow, inside the plot, and clusters either sharing a line or each having one to itself — never one floating against the middle of the other. That last assertion is the staggering bug, pinned directly. Checked by eye in light and dark, at 1600/1200/900/420px, and in the broadcast operator layout whose green highlight still frames the bandwidth cluster. Frontend typecheck, lint, 42 unit tests and all four browser suites pass; `cargo fmt --check` clean; `app.ts` untouched and every id preserved, so handlers and the broadcast highlight keep working. `docs/Spectrum-Controls-Rework.md` records the analysis, including what was deliberately **not** touched: the two different `Auto`s, floor/range/contrast not persisting, the one-shot buttons, and Sweet-spot's silence while it retunes the SDR. Those are behaviour, for another day.

sjg added 1 commit 2026-08-06 01:09:06 +02:00

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

CI / test (pull_request) Successful in 8m20s

Details

CI / lint (pull_request) Successful in 2m22s

Details

CI / frontend (pull_request) Successful in 4m9s

Details

CI / reuse (pull_request) Successful in 3s

Details

91016b8443

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>

sjg merged commit 06971ff65c into main

2026-08-06 01:10:27 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sjg/trx-rs#45