The footer's controls rearrange themselves at every window width, and a third of it is empty #489

The problem

The footer's control row has no stable shape. It rearranges itself at every
window width, and a third of it is empty.

The clusters wrap. Transport, Position, Speed, Global key and Click track sit
in a wrapping flex row. Depending on the width, the click track either shares the
line, takes its own, or stays on the line and splits its own options across two
rows. The footer is never the same shape twice, and the same control is in a
different place on two machines.

The labels break rank. The row is bottom-aligned. The click track is two rows
tall whenever its options are showing, so its label ends up a full row above the
other four and the band reads as broken.

Every divider is hidden. The hairlines between clusters are hidden when they
are stranded at the end of a wrapped line. In practice the bottom-alignment above
means the check never matches, so none of them are ever drawn.

300 px of the footer is empty. The footer's left column is reserved so the
timeline below it lines up with the lane waveforms. That is a real constraint: a
position has to read at the same x in both. But nothing occupies the gutter beside
the controls, so every control is pushed toward the right of the window with a
void beside it.

The footer is taller than its contents. min-height: 200px dates from when
the click cluster could wrap and a rigid height would have clipped it. Its
content needs 170. The surplus pools as a gap wherever the tiers are not pushed
against it.

Why it matters

This is the app's primary control surface, and it is also 200 px of the vertical
budget #480 is about. Both the instability and the waste come from the same
place: a row that reflows instead of holding a shape.