What goes wrong
Narrow the window and the seven Extract chips wrap. The composer goes from 96px tall to 168, and to 236 by 900px as they spill onto a third and fourth line, so the bar grows exactly as the window shrinks.
It is not only height. The controls on the right, Detect structure, Split stems and the Collapse row, are in the same grid rows, so they are stranded at the top and bottom of a column stretched by chips they have nothing to do with, with a band of empty bar between them.
Why a breakpoint is not the answer
Seven chips, ten languages, and a Vocals group whose width changes with whether its mode buttons are on screen. The width at which the fifth chip stops fitting is not a number anyone can write down, and any number picked would be wrong in nine languages.
What it should do
Keep the row to one line at every width. Whichever chips do not fit go behind a button, one at a time from the end of the row, and come back as the window widens.
Constraints for whoever fixes it
- Do not measure the element you are moving things out of. The chips are what give their column its width, so emptying the row shrinks it: it collapses and never grows back, because the chips that would widen it are in the panel. Measure something whose width tracks the window regardless of where any chip currently lives.
- The refit has to run on a language change too: every label's width changes with it.
- The library sidebar collapsing changes the space available without the window resizing at all, so a
window.resize listener alone is not enough.
- The footer already solves the same problem for the click-track options, in
footerFit.js, and its comments are worth reading first: it documents why the decision is re-made from the uncollapsed state each time rather than from the current one.
What goes wrong
Narrow the window and the seven Extract chips wrap. The composer goes from 96px tall to 168, and to 236 by 900px as they spill onto a third and fourth line, so the bar grows exactly as the window shrinks.
It is not only height. The controls on the right, Detect structure, Split stems and the Collapse row, are in the same grid rows, so they are stranded at the top and bottom of a column stretched by chips they have nothing to do with, with a band of empty bar between them.
Why a breakpoint is not the answer
Seven chips, ten languages, and a Vocals group whose width changes with whether its mode buttons are on screen. The width at which the fifth chip stops fitting is not a number anyone can write down, and any number picked would be wrong in nine languages.
What it should do
Keep the row to one line at every width. Whichever chips do not fit go behind a button, one at a time from the end of the row, and come back as the window widens.
Constraints for whoever fixes it
window.resizelistener alone is not enough.footerFit.js, and its comments are worth reading first: it documents why the decision is re-made from the uncollapsed state each time rather than from the current one.