-
- StemDeck
-
+
+
+ 
+
-
-
-
-
+
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 2d14a61a..3072efae 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -240,6 +240,7 @@ const en = {
"topbar.urlPlaceholder": "Search or drop an audio file…",
"topbar.removeFile": "Remove file",
"topbar.uploadFile": "Upload audio file",
+ "topbar.website": "Open stemdeck.app",
"extract.label": "Extract",
"extract.all": "All",
"extract.moreAria": "Choose stems",
@@ -857,6 +858,7 @@ const pl = {
"topbar.urlPlaceholder": "Szukaj albo upuść plik audio…",
"topbar.removeFile": "Usuń plik",
"topbar.uploadFile": "Wgraj plik audio",
+ "topbar.website": "Otwórz stemdeck.app",
"extract.label": "Wyodrębnij",
"extract.all": "Wszystko",
"extract.moreAria": "Wybierz ścieżki",
@@ -1464,6 +1466,7 @@ const ja = {
"topbar.urlPlaceholder": "検索するか、音声ファイルをドロップ…",
"topbar.removeFile": "ファイルを削除",
"topbar.uploadFile": "音声ファイルをアップロード",
+ "topbar.website": "stemdeck.app を開く",
"extract.label": "抽出",
"extract.all": "すべて",
"extract.moreAria": "抽出するパートを選ぶ",
@@ -2046,6 +2049,7 @@ const zhHans = {
"topbar.urlPlaceholder": "搜索，或拖放音频文件…",
"topbar.removeFile": "移除文件",
"topbar.uploadFile": "上传音频文件",
+ "topbar.website": "打开 stemdeck.app",
"extract.label": "提取",
"extract.all": "全部",
"extract.moreAria": "选择要提取的音轨",
@@ -2628,6 +2632,7 @@ const de = {
"topbar.urlPlaceholder": "Suchen oder eine Audiodatei ablegen…",
"topbar.removeFile": "Datei entfernen",
"topbar.uploadFile": "Audiodatei hochladen",
+ "topbar.website": "stemdeck.app öffnen",
"extract.label": "Extrahieren",
"extract.all": "Alle",
"extract.moreAria": "Stems auswählen",
@@ -3221,6 +3226,7 @@ const pt = {
"topbar.urlPlaceholder": "Pesquise ou solte um arquivo de áudio…",
"topbar.removeFile": "Remover arquivo",
"topbar.uploadFile": "Enviar arquivo de áudio",
+ "topbar.website": "Abrir stemdeck.app",
"extract.label": "Extrair",
"extract.all": "Todos",
"extract.moreAria": "Escolher as faixas",
@@ -3816,6 +3822,7 @@ const id = {
"topbar.urlPlaceholder": "Cari atau seret file audio…",
"topbar.removeFile": "Hapus file",
"topbar.uploadFile": "Unggah file audio",
+ "topbar.website": "Buka stemdeck.app",
"extract.label": "Ekstrak",
"extract.all": "Semua",
"extract.moreAria": "Pilih stem",
@@ -4398,6 +4405,7 @@ const fr = {
"topbar.urlPlaceholder": "Recherchez ou déposez un fichier audio…",
"topbar.removeFile": "Retirer le fichier",
"topbar.uploadFile": "Importer un fichier audio",
+ "topbar.website": "Ouvrir stemdeck.app",
"extract.label": "Extraire",
"extract.all": "Tout",
"extract.moreAria": "Choisir les pistes",
@@ -5109,6 +5117,7 @@ const es = {
"topbar.urlPlaceholder": "Busca o suelta un archivo de audio…",
"topbar.removeFile": "Quitar archivo",
"topbar.uploadFile": "Subir archivo de audio",
+ "topbar.website": "Abrir stemdeck.app",
"extract.label": "Extraer",
"extract.all": "Todo",
"extract.moreAria": "Elegir las pistas",
@@ -5725,6 +5734,7 @@ const ko = {
"topbar.urlPlaceholder": "검색하거나 오디오 파일을 끌어다 놓으세요…",
"topbar.removeFile": "파일 제거",
"topbar.uploadFile": "오디오 파일 업로드",
+ "topbar.website": "stemdeck.app 열기",
"extract.label": "추출",
"extract.all": "전체",
"extract.moreAria": "추출할 스템 선택",
diff --git a/tests/e2e/brand-link.spec.mjs b/tests/e2e/brand-link.spec.mjs
new file mode 100644
index 00000000..ff81fb55
--- /dev/null
+++ b/tests/e2e/brand-link.spec.mjs
@@ -0,0 +1,76 @@
+// The logo opens the site, and on the desktop it opens it outside the app.
+//
+// This is the case a browser test would pass without checking: in a browser,
+// target="_blank" is the whole implementation and there is nothing to get
+// wrong. Inside the Tauri webview there is no second tab to open into, so a
+// link left to its own devices navigates the app window away from StemDeck and
+// leaves the user in a web page with no way back. main.js intercepts
+// a[target="_blank"] and hands the URL to the shell instead, and the logo has
+// to be reached by that path rather than by a click handler of its own.
+import { test, expect } from "@playwright/test";
+import { openStudio } from "./helpers.mjs";
+
+test.describe("the logo links to the site", () => {
+ test("it is an external anchor, not a decoration", async ({ page }) => {
+ await openStudio(page, { tauri: true });
+
+ const link = page.locator(".daw-brand a");
+ await expect(link).toHaveAttribute("href", "https://stemdeck.app");
+ await expect(link).toHaveAttribute("target", "_blank");
+ // Without noopener the opened page gets a handle on this one.
+ await expect(link).toHaveAttribute("rel", "noopener noreferrer");
+ });
+
+ test("on the desktop the click goes to the shell, not the app window", async ({ page }) => {
+ await openStudio(page, { tauri: true });
+
+ const result = await page.evaluate(async () => {
+ const seen = [];
+ const original = window.__TAURI__.core.invoke;
+ window.__TAURI__.core.invoke = (cmd, args) => {
+ seen.push({ cmd, url: args?.url });
+ return original(cmd, args);
+ };
+ document.querySelector(".daw-brand a").click();
+ await new Promise((r) => setTimeout(r, 200));
+ window.__TAURI__.core.invoke = original;
+ return { seen, path: location.pathname };
+ });
+
+ expect(result.seen).toContainEqual({ cmd: "open_url", url: "https://stemdeck.app/" });
+ // And the app is still the thing on screen.
+ expect(result.path).toBe("/");
+ });
+
+ test("its tooltip is translated like every other label", async ({ page }) => {
+ // An icon with no text is only labelled by its title and aria-label, so a
+ // hardcoded English string here would be the one part of the bar that does
+ // not follow the language setting.
+ await page.addInitScript(() =>
+ localStorage.setItem("stemdeck.language", JSON.stringify("de")),
+ );
+ await openStudio(page, { tauri: true });
+
+ const link = page.locator(".daw-brand a");
+ await expect(link).toHaveAttribute("title", "stemdeck.app öffnen");
+ await expect(link).toHaveAttribute("aria-label", "stemdeck.app öffnen");
+ });
+
+ test("the link does not change the shape of the logo cell", async ({ page }) => {
+ // The anchor is a flex item inside a cell that centres it. Left inline it
+ // would carry a line box and push the logo off the rail's centre line.
+ await openStudio(page, { tauri: true });
+
+ const box = await page.evaluate(() => {
+ const cell = document.querySelector(".daw-brand").getBoundingClientRect();
+ const img = document.querySelector(".daw-brand img").getBoundingClientRect();
+ return {
+ above: Math.round(img.top - cell.top),
+ below: Math.round(cell.bottom - img.bottom),
+ height: Math.round(img.height),
+ };
+ });
+ expect(box.height).toBe(52);
+ expect(Math.abs(box.above - box.below)).toBeLessThanOrEqual(1);
+ });
+});
From b1b4154e272a73872d4ea61a08ae9c7288f367cd Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Wed, 23 Sep 2026 10:42:25 +0100
Subject: [PATCH 4/9] Keep the Extract row on one line in every language
The chips fold into a three dots button as the window narrows, so the bar never
gets taller. That was the intent; the row went to two lines anyway, in French
and Polish at 1280, on a stock laptop. English fit, which is why nobody saw it.
Three separate things were wrong, and each on its own was enough.
The row declares flex-wrap: nowrap for itself. A leftover rule from the earlier
composer layout set flex-wrap: wrap one class deeper, so the more specific
selector won and the row never stopped wrapping. That rule was right when it
was written, before folding existed to absorb the overflow. It is gone, and the
comment above it no longer describes a row that wraps.
The fold measured the row before revealing the button, so it kept one chip too
many every time it folded at all. The button takes its width out of the row,
not out of the bar, so the chip that had just been measured as fitting no
longer did. The button is now shown before the second measurement.
Margins were not counted. The Vocals group carries a right margin to set it
apart from Drums, and a bounding rect does not include it, so the sum came up
short by exactly that margin and the last chip sat a pixel past the edge with
the fitter reporting that everything fitted.
And the answer could invalidate itself. The row sits in a grid track sized from
its own content, so folding a chip shrinks the column and can leave the chips
that stayed overflowing a row that genuinely had room for them a moment before.
Chinese at 1024 is where that showed. One pass cannot see it, so it now folds,
looks again, and folds again until the row is honest.
None of this had a test, which is how all three shipped together. There is one
now, and it runs in ten languages at four widths, because English at a wide
window is the state that proves nothing.
---
static/css/daw.css | 15 ++-
static/js/main.js | 68 +++++++++--
tests/e2e/stem-chip-overflow.spec.mjs | 169 ++++++++++++++++++++++++++
3 files changed, 236 insertions(+), 16 deletions(-)
create mode 100644 tests/e2e/stem-chip-overflow.spec.mjs
diff --git a/static/css/daw.css b/static/css/daw.css
index 76d2b8d6..58234fb3 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -4282,17 +4282,20 @@ input, textarea { font-family: inherit; }
}
/* Row two, column one. This is what sizes the column, and therefore the search
- box above it. The chips wrap rather than forcing the row wider than the bar:
- at max-content they are 655px, which on their own overflow a 1100px window
- once the two actions have been paid for. */
+ box above it. min-width: 0 is what lets it be narrower than the chips inside
+ it: at max-content they are 655px, which on their own overflow a 1100px
+ window once the two actions have been paid for.
+
+ The chips used to be allowed to wrap here, which is how that overflow was
+ absorbed before the row could fold. It cannot be allowed now: the rule was
+ three classes deep and quietly outranked the two-class `flex-wrap: nowrap`
+ the folding row declares for itself, so the row kept wrapping to a second
+ line in any language whose words are longer than English (#673). */
.daw-composer > .daw-stem-section {
grid-column: 1;
grid-row: 2;
min-width: 0;
}
-.daw-composer > .daw-stem-section .daw-stem-chips {
- flex-wrap: wrap;
-}
/* The rule stays, but it now separates the search from the two actions on the
same line, which is what it does in the mockup. It used to divide the row
diff --git a/static/js/main.js b/static/js/main.js
index 412b8076..29ce8e61 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -195,29 +195,77 @@ function fitStemChips() {
if (!row || !panel || !btn || !_stemChipOrder) return;
for (const el of _stemChipOrder) row.appendChild(el);
+ // Both measurements below are taken against a row that is not paying for the
+ // button yet, so it starts hidden and is revealed only once the answer is
+ // known to need it.
+ btn.hidden = true;
// Measured after everything is back, so the number is what the row can have
// rather than what it was left with. A hidden row has no width to fit
// anything into, and measuring one would move every chip for nothing.
- const budget = row.clientWidth;
+ let budget = row.clientWidth;
if (!budget) return;
const gap = parseFloat(getComputedStyle(row).gap) || 0;
- const widths = _stemChipOrder.map((el) => el.getBoundingClientRect().width);
+ // A margin is part of what a chip costs the row. The Vocals group carries a
+ // right margin to set it apart from Drums, and a rect is measured without
+ // it, so the sum came up short by exactly that margin and the last chip sat
+ // a pixel past the edge with the fitter reporting everything fitted (#673).
+ const widths = _stemChipOrder.map((el) => {
+ const cs = getComputedStyle(el);
+ return (
+ el.getBoundingClientRect().width +
+ (parseFloat(cs.marginLeft) || 0) +
+ (parseFloat(cs.marginRight) || 0)
+ );
+ });
+ const total = widths.reduce((a, w, i) => a + w + (i ? gap : 0), 0);
+
+ // Half a pixel of rounding is not an overflow; the row is overflow: hidden
+ // and a chip that fits within a pixel is drawn whole.
+ const fits = (used) => used <= budget + 0.5;
- let used = 0;
let keep = _stemChipOrder.length;
- for (let i = 0; i < _stemChipOrder.length; i++) {
- used += widths[i] + (i ? gap : 0);
- // Half a pixel of rounding is not an overflow; the row is overflow: hidden
- // and a chip that fits within a pixel is drawn whole.
- if (used > budget + 0.5) {
- keep = i;
- break;
+ if (!fits(total)) {
+ // Something has to fold, so the button is going to be on screen, and it
+ // takes its width out of this row rather than out of the bar. Deciding
+ // against a budget measured without it is what made the fold stop one chip
+ // short every time it folded at all: the row lost the button's width the
+ // moment the answer was applied, and the chip that had just been measured
+ // as fitting no longer did (#673).
+ btn.hidden = false;
+ budget = row.clientWidth;
+
+ let used = 0;
+ keep = 0;
+ for (let i = 0; i < _stemChipOrder.length; i++) {
+ used += widths[i] + (i ? gap : 0);
+ if (!fits(used)) break;
+ keep = i + 1;
}
}
for (let i = keep; i < _stemChipOrder.length; i++) panel.appendChild(_stemChipOrder[i]);
+ btn.hidden = keep === _stemChipOrder.length;
+
+ // Then look at what that did, because the answer can invalidate itself.
+ //
+ // The row sits in a grid track sized from its own content, so the width it
+ // is given depends on what is in it. Folding a chip out shrinks the column,
+ // which can leave the chips that stayed overflowing a row that genuinely had
+ // room for them when they were measured. A single pass cannot see that, and
+ // Chinese at 1024 is where it showed: five chips folded, and the two left
+ // over hung 4px past an edge that had moved underneath them (#673).
+ //
+ // So fold, look again, fold again. Each turn only removes a chip, and the
+ // counter is the belt to the loop's braces.
+ let guard = _stemChipOrder.length;
+ while (keep > 0 && row.scrollWidth > row.clientWidth + 1 && guard-- > 0) {
+ keep -= 1;
+ btn.hidden = false;
+ panel.insertBefore(_stemChipOrder[keep], panel.firstChild);
+ }
+
btn.hidden = keep === _stemChipOrder.length;
if (btn.hidden) closeStemOverflow();
}
diff --git a/tests/e2e/stem-chip-overflow.spec.mjs b/tests/e2e/stem-chip-overflow.spec.mjs
new file mode 100644
index 00000000..47a970b1
--- /dev/null
+++ b/tests/e2e/stem-chip-overflow.spec.mjs
@@ -0,0 +1,169 @@
+// The Extract row is one line at every width, and folds its tail into a button
+// rather than wrapping.
+//
+// Chips used to wrap to a second line as the window narrowed, which moved
+// everything below them (#668). They now fold from the end into a popover
+// behind a three dots button, and come back on the way out. Nothing tested
+// any of that, and two separate bugs shipped underneath it:
+//
+// - The row declares `flex-wrap: nowrap` for itself, and a leftover rule
+// from the earlier composer layout set `flex-wrap: wrap` one class deeper.
+// The more specific rule won, so the row never stopped wrapping. English
+// fit anyway; French and Polish did not, and went to two lines at 1280
+// (#673).
+// - The fold measured the row before revealing the button, so it kept one
+// chip too many: the button took its width out of the row the moment it
+// appeared, and the chip measured as fitting no longer fit.
+//
+// Both are invisible in English at a wide window, which is the state a
+// maintainer looks at. Hence the languages below.
+import { test, expect } from "@playwright/test";
+import { openStudio } from "./helpers.mjs";
+
+// A chip is 30px. Anything above this is a second line.
+const ONE_LINE = 34;
+
+const row = (page) =>
+ page.evaluate(() => {
+ const el = document.getElementById("stemChips");
+ const btn = document.getElementById("stemMoreBtn");
+ const panel = document.getElementById("stemOverflow");
+ return {
+ height: Math.round(el.getBoundingClientRect().height),
+ // Overflow is hidden, so this is the only way to see a chip cut in half.
+ clipped: Math.round(el.scrollWidth - el.clientWidth),
+ inRow: el.querySelectorAll(".stem-choice, .stem-group").length,
+ folded: panel.querySelectorAll(".stem-choice, .stem-group").length,
+ moreShown: !btn.hidden,
+ };
+ });
+
+async function atWidth(page, width) {
+ await page.setViewportSize({ width, height: 900 });
+ await page.waitForTimeout(400);
+ return row(page);
+}
+
+const openIn = async (page, lang) => {
+ await page.addInitScript(
+ (l) => localStorage.setItem("stemdeck.language", JSON.stringify(l)),
+ lang,
+ );
+ await openStudio(page, { tauri: true });
+};
+
+test.describe("extract row overflow", () => {
+ test("a wide window folds nothing and hides the button", async ({ page }) => {
+ await page.setViewportSize({ width: 1600, height: 900 });
+ await openIn(page, "en");
+
+ const s = await atWidth(page, 1600);
+ expect(s.folded).toBe(0);
+ expect(s.moreShown).toBe(false);
+ expect(s.height).toBeLessThanOrEqual(ONE_LINE);
+ });
+
+ test("narrowing folds from the end, and the row stays one line", async ({ page }) => {
+ await page.setViewportSize({ width: 1600, height: 900 });
+ await openIn(page, "en");
+
+ let previous = 0;
+ for (const width of [1600, 1280, 1100, 1024, 960, 900]) {
+ const s = await atWidth(page, width);
+ expect(s.height, `two lines at ${width}`).toBeLessThanOrEqual(ONE_LINE);
+ // The failure the budget bug produced: the fold ran, and the row was
+ // still a chip wider than the space left over once the button appeared.
+ expect(s.clipped, `a chip is cut off at ${width}`).toBeLessThanOrEqual(1);
+ expect(s.folded, `folding went backwards at ${width}`).toBeGreaterThanOrEqual(previous);
+ if (s.folded > 0) expect(s.moreShown, `nothing offers the folded chips at ${width}`).toBe(true);
+ previous = s.folded;
+ }
+ // Something must have folded by 900, or this test is not exercising it.
+ expect(previous).toBeGreaterThan(0);
+ });
+
+ test("widening gives every chip back", async ({ page }) => {
+ // The fitter used to observe the row it was emptying, so once the row had
+ // collapsed it never saw the window grow again (#671).
+ await page.setViewportSize({ width: 1600, height: 900 });
+ await openIn(page, "en");
+
+ const narrow = await atWidth(page, 900);
+ expect(narrow.folded).toBeGreaterThan(0);
+
+ const wide = await atWidth(page, 1600);
+ expect(wide.folded).toBe(0);
+ expect(wide.moreShown).toBe(false);
+ expect(wide.inRow).toBe(narrow.inRow + narrow.folded);
+ });
+
+ test("it holds one line in every language, not just English", async ({ page }) => {
+ // English is the shortest of the ten and the only one anyone checks by eye.
+ const offenders = [];
+ for (const lang of ["en", "de", "pl", "pt", "fr", "es", "id", "ja", "ko", "zh-Hans"]) {
+ await page.setViewportSize({ width: 1600, height: 900 });
+ await openIn(page, lang);
+ for (const width of [1440, 1280, 1100, 1024]) {
+ const s = await atWidth(page, width);
+ if (s.height > ONE_LINE || s.clipped > 1) {
+ offenders.push({ lang, width, height: s.height, clipped: s.clipped });
+ }
+ }
+ }
+ expect(offenders).toEqual([]);
+ });
+
+ test("a settled row stops moving chips", async ({ page }) => {
+ // The fitter is driven by a ResizeObserver on the composer, and it now
+ // changes layout while it measures: it hides and shows the button, and
+ // folds one more chip at a time until the row is honest. Each of those is
+ // a size change the observer can hear, so a wrong stopping condition is an
+ // infinite loop that pins a core rather than a visible bug.
+ await page.setViewportSize({ width: 1100, height: 900 });
+ await openIn(page, "de");
+ await page.waitForTimeout(800);
+
+ const moves = await page.evaluate(async () => {
+ let n = 0;
+ const seen = new MutationObserver((records) => {
+ n += records.length;
+ });
+ seen.observe(document.getElementById("stemChips"), { childList: true });
+ seen.observe(document.getElementById("stemOverflow"), { childList: true });
+ await new Promise((r) => setTimeout(r, 1500));
+ seen.disconnect();
+ return n;
+ });
+ expect(moves).toBe(0);
+ });
+
+ test("a folded chip still selects its stem", async ({ page }) => {
+ // Folding is a place to put a control, not a way to retire it. The
+ // listeners are bound per chip rather than delegated from the row, which is
+ // what lets a chip keep working somewhere else in the document.
+ await page.setViewportSize({ width: 1600, height: 900 });
+ await openIn(page, "en");
+ await atWidth(page, 900);
+
+ const pressed = () =>
+ page.evaluate(() =>
+ [...document.querySelectorAll(".stem-choice[data-stem]")]
+ .filter((b) => b.getAttribute("aria-pressed") === "true")
+ .map((b) => b.dataset.stem)
+ .sort(),
+ );
+
+ const chip = page.locator("#stemOverflow .stem-choice[data-stem]").first();
+ const stem = await chip.getAttribute("data-stem");
+ const before = await pressed();
+
+ await page.locator("#stemMoreBtn").click();
+ await chip.click();
+
+ // Pressing a chip from the all-selected default means "only this one", so
+ // what is asserted is that the press was heard, not that it toggled.
+ const after = await pressed();
+ expect(after).not.toEqual(before);
+ expect(after).toContain(stem);
+ });
+});
From d016ed53611985d9f6a68dfbac61e7153ba0f647 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Wed, 23 Sep 2026 10:44:10 +0100
Subject: [PATCH 5/9] Make Combined and Lead + Backing the control for the
vocals
Vocals is the one stem with something to say about how it comes out, so the
row has three states for it where every other chip has two: as one track,
split into lead and backing, or not extracted. The two mode buttons carry all
three. Neither lit is what "no vocals" looks like, and the chip agrees with
them.
Before this the pair was a consequence of the chip rather than a control. It
was hidden until Vocals was pressed, which made the group change shape every
time that chip was pressed, and made saying how you want the vocals split
something you could only do after asking for them. Dimming it instead of
hiding it fixed the shape and left the ordering exactly as wrong.
So: pressing the mode already in force switches vocals off, pressing the other
switches mode and leaves them on, and pressing either from cold switches them
on in that mode. The chip is still a way in and the shorter one, switching
vocals on as Combined without a second press. The mode is remembered while the
vocals are off, so the buttons return to the way they were last asked for; the
chip does not restore it, because that press does not name a mode.
Two things came out of the same work.
Pressing the last remaining chip used to turn all six stems back on. The set
emptied and a guard caught it and refilled it, so narrowing down to one stem
and pressing it again produced the most there is, which is the opposite of
what the press asked for. An empty row does not need preventing here: All
reaches it in one press and is the control whose job that is.
And an empty row could be submitted, which was worse than it looked. The
server reads an empty stems list as every stem (app/api/jobs.py), so a submit
in that state would have extracted the six stems the row was showing as off.
Split is disabled while nothing is selected rather than the selection being
quietly rewritten underneath.
Painting stays in one place. The mode buttons used to set their own
aria-pressed from the click handler, which is the shape that put All a state
behind its own chips in #658: the painter reachable by a click is never the
one that is wrong.
---
static/css/daw.css | 12 +--
static/index.html | 12 ++-
static/js/main.js | 65 ++++++++++++----
static/js/stemChoice.js | 38 +++++++---
tests/e2e/extract-row.spec.mjs | 135 +++++++++++++++++++++++++++++++--
5 files changed, 222 insertions(+), 40 deletions(-)
diff --git a/static/css/daw.css b/static/css/daw.css
index 58234fb3..71ab4f1c 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -340,7 +340,6 @@ input, textarea { font-family: inherit; }
border-radius: 6px;
overflow: hidden;
}
-.vocal-mode-toggle.hidden { display: none; }
.vocal-mode-btn {
height: 100%;
padding: 0 10px;
@@ -4740,11 +4739,8 @@ input, textarea { font-family: inherit; }
gap: 0;
margin-right: 5px;
}
-.stem-group:not(:has(.vocal-mode-toggle:not(.hidden))) {
- margin-right: 0;
-}
/* Facing edges square, and only one border between them. */
-.stem-group:has(.vocal-mode-toggle:not(.hidden)) .stem-choice[data-stem="vocals"] {
+.stem-group .stem-choice[data-stem="vocals"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
@@ -4764,9 +4760,9 @@ input, textarea { font-family: inherit; }
* selected, the active mode is tinted because it is the mode, and the other
* one is plain.
*
- * Keyed off the chip's pressed state, because the toggle is only on screen
- * while Vocals is selected and should not be left as the one thing still
- * wearing the colour if that ever changes. */
+ * Keyed off the chip's pressed state rather than on the toggle being present,
+ * because it is always present: with Vocals off, the group drops back to the
+ * plain border and the toggle dims beside it. */
.stem-group:has(.stem-choice[data-stem="vocals"][aria-pressed="true"]) .vocal-mode-toggle {
--color: var(--vocals);
border-color: color-mix(in srgb, var(--color) 60%, transparent);
diff --git a/static/index.html b/static/index.html
index c91c00ab..0fc0d807 100644
--- a/static/index.html
+++ b/static/index.html
@@ -101,13 +101,19 @@
Loose in the row, the mode buttons read as peers of Drums and
Bass rather than as a choice about the chip beside them. -->
+
-
-
- ${state.selected.vocals ? `
+
${extractProgressCard()}
Vocals
` : ""}
-
+
-
-
+
+
-