Repository navigation
Make the Extract row hold one line at any width - #671
Merged
Merged
Conversation
added 3 commits
September 22, 2026 21:49
It governed two panels by the end, Analysis and Sections, so one press saved exactly one press. And it was a third control in this bar wearing that word, next to a row where "All" already means every stem and, inside that, keeping the vocals as one track. What it existed to prove still holds and is now the row's only job: whatever this row collapses, it can bring back. Each panel has its own button, which is the only way back from a collapsed one, and the library is still not among them (#588). Its wiring goes with it: wireAllToggle, the MutationObserver it kept on .app to stay honest about a state it no longer reports, and the panels.all and panels.allTitle keys across all ten tables. The spec is rewritten around what survives rather than patched: the row is the panels it governs and nothing else, every panel it puts away it can bring back, it leaves the library alone, collapsing the library does not disturb it, and a collapsed panel survives a reload.
Two things about that row, both about what it does when there is not enough width for it. Vocals, All and Lead + Backing were three loose chips among six stems, so the two that describe Vocals read as peers of Drums and Bass. They are joined now: the chip and the mode buttons touch, their facing corners square off, and one outline in the Vocals colour runs round the three of them. The outline carries the grouping, the fill carries the state, which is why the active mode still reads at a glance. Tinting the whole group instead made Lead + Backing look selected when it is not. The chips no longer wrap. Whichever ones do not fit move into a panel behind a three-dot button, one at a time, from the end of the row, and come back as the window widens. Wrapping was the alternative and it is the wrong one: the bar went from 96px tall to 168 and then 236 as they spilled onto further lines, so it grew exactly as the window shrank, and the controls on the right were left stranded at the top of a column stretched by chips they have nothing to do with. It is 96px at every width from 2560 down to 900 now. Measured, not a breakpoint: seven chips in ten languages have no width anyone can write down. It also retired the 1320px rule that used to drop the Collapse row onto a third line, which existed only because the chips filled row two. The observer watches the composer rather than the chip row, and that is the part worth keeping in mind. Watching the row meant measuring the thing being changed: emptying it shrank the column it sits in, so at a narrow window the row collapsed to 127px and widening the window never widened it back, because the chips that would have done so were in the panel. The chips never came home. And the now-playing card stops stretching. Filling its column turned spare bar into spare card with the same text in it, so it has a real ceiling at 460px, what the meta line needs at its longest. Identical at 1920, 2200 and 2560.
An audio, music and tech industry podcast by working professionals, under Media & Community. Both copies of the list, since nothing checks that they agree: FRIEND_GROUPS for the dialog in the app, and the table in the README. The artwork is bundled under static/img/friends/ like the rest, so the dialog still renders with no network. The role line is in all ten language tables rather than English only, since a missing key falls back to English silently and would have read untranslated in nine of them.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #668
Closes #669
Closes #670
Three commits. Two are the Extract row behaving at narrow widths; one is an unrelated addition to We Recommend that was sitting in the tree.
The chips fold instead of wrapping (#668)
Narrow the window and the seven chips used to wrap: the composer went from 96px tall to 168, and 236 by 900px, so the bar grew exactly as the window shrank. The controls on the right share those rows, so they were stranded at the top and bottom of a column stretched by chips they have nothing to do with.
They now fold into a panel behind a three-dot button, one at a time from the end of the row, and come back as the window widens. 96px at every width from 2560 down to 900.
Measured rather than a breakpoint: seven chips in ten languages have no width anyone can write down. It also retired the 1320px rule that dropped the Collapse row onto a third line, which existed only because the chips filled row two.
The part worth reviewing: the observer watches the composer, not the chip row. Watching the row meant measuring the thing being changed, and it fails in a way that looks like nothing: emptying the row shrinks the column it sits in, so at a narrow window it collapsed to 127px and widening the window never widened it back, because the chips that would have done so were in the panel. The chips never came home.
Vocals is grouped with its modes (#669)
"All" and "Lead + Backing" were loose chips among the stems, reading as peers of Drums and Bass rather than as a setting on the chip before them. They are joined now, with one outline in the Vocals colour around the three.
Grouped by joining rather than by a box: a wrapper with its own padding made the group 38px in a row of 30px chips and it hung below everything beside it. The outline carries the grouping and the fill carries the state, so the active mode still reads; tinting the group as a whole made Lead + Backing look selected when it is not.
The now-playing card stops stretching (#670)
It filled its column, so spare bar became spare card. It has a real ceiling now at 460px, which is what the meta line needs at its longest. Identical at 1920, 2200 and 2560.
Also here
"All" is gone from the Collapse row. It governed two panels by the end, so one press saved one press, and it was a third control in this bar wearing that word. Its wiring, its MutationObserver and the
panels.allkeys in ten tables go with it. The spec is rewritten around what survives: the row is the panels it governs and nothing else, and everything it puts away it can bring back.Not Another Audio Podcast added to We Recommend, in both copies of the list, with its role line in ten tables.
Verified
Playwright 196 passing,
node --checkover every module, i18n coverage clean. Geometry measured at 2560, 2200, 1920, 1600, 1400, 1300, 1200, 1100, 1000 and 900, and the fold verified round trip: 1600 to 900 and back restores all seven chips.