From b30aecc51e8540c6cf28571908388e159fdf89ff Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 15:03:10 +0100
Subject: [PATCH 1/6] Line the empty studio's lanes up with the mixer beside
 them

Open the app and look at the stack before loading anything: seven flat lines
against six faders, drifting further apart with every row, and the last line
with no fader at all.

Two faults, both in the empty state only.

The placeholder lane was a flat 48px while every mixer row is sized from
--lane-h, which is 77px on an empty studio. The two columns ran at different
pitches from the first row, so a stem's name and the line for its waveform were
on different rows by the third one. --lane-h is the row, and a row is a lane
plus its 2px separator, so the lane is the variable less the separator.

And there was one placeholder too many. renderPlaceholderTracks built one per
stem plus "original", but the mixer hides its original row until a job is
loaded: applyStemSelectionFilter is called here with STEM_NAMES, and original
is not in that set. The set the mixer shows is the set to draw, so the two are
the same list now.

Loading a track has always been fine, which is why this survived: the real
lanes and the mixer both come from the same row height once a job exists. It is
the state before that which nothing was checking.
---
 static/css/waves.css | 10 +++++++++-
 static/js/player.js  | 14 +++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/static/css/waves.css b/static/css/waves.css
index ed3ff077..fc6c9522 100644
--- a/static/css/waves.css
+++ b/static/css/waves.css
@@ -955,8 +955,16 @@
   border-radius: 2px;
 }
 
+/* One row of the stack, the same row the mixer draws beside it.
+ *
+ * Was a flat 48px while every mixer row is sized from --lane-h, which is 77px
+ * on an empty studio: the two columns ran at different pitches from the first
+ * row, so a stem's name and the line for its waveform were on different lines
+ * by the third one. --lane-h is the row, and the row is a lane plus its 2px
+ * separator, so the lane is the variable less the separator. */
 .lane-placeholder {
-  height: 48px;
+  height: calc(var(--lane-h, 72px) - 2px);
+  margin-bottom: 2px;
   position: relative;
 }
 
diff --git a/static/js/player.js b/static/js/player.js
index be2e32bc..2b922911 100644
--- a/static/js/player.js
+++ b/static/js/player.js
@@ -238,9 +238,21 @@ function resetAnalysisCards() {
   if (loudnessCard) loudnessCard.classList.add("hidden");
 }
 
+/**
+ * The empty studio's lanes: one flat line per stem, where its waveform will be.
+ *
+ * STEM_NAMES only, deliberately. "original" used to be in this list, giving
+ * seven lanes against the six rows the mixer shows with no job loaded, because
+ * the mixer hides its original row until one is: `applyStemSelectionFilter` is
+ * called here with STEM_NAMES, and original is not in that set. Seven lines
+ * beside six faders drifted apart down the stack, and the last of them had no
+ * fader at all.
+ *
+ * The set the mixer shows is the set to draw, so the two are the same list.
+ */
 function renderPlaceholderTracks() {
   multitrackContainer.innerHTML = "";
-  for (const name of ["original", ...STEM_NAMES]) {
+  for (const name of STEM_NAMES) {
     const ph = document.createElement("div");
     ph.className = "lane-placeholder";
     ph.dataset.stem = name;

From 3c98a5d7ff5a5acdefd0a0e87cda6392a0f0bed4 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 15:03:43 +0100
Subject: [PATCH 2/6] Give the top bar back the vertical padding it declares

.daw-topbar sets padding-top and padding-bottom, and then a few lines later
sets `padding: 0 16px`, which resets both to zero. A shorthand after longhands
wins, so the bar has never had the vertical padding the comment above it
describes.

Nothing showed it. The composer inside is a fixed 50px in a bar with a 77px
minimum, and align-items: center hid the missing space evenly. It only appears
once that composer is taller than the bar's minimum, and then the box fills the
bar edge to edge and its top border sits against the top of the window.

One declaration instead of three, in the order that does what it says.
---
 static/css/daw.css | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index 5c491e68..ddeeac1a 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -46,14 +46,19 @@ input, textarea { font-family: inherit; }
      line, and auto height means a translation that wraps grows the bar rather
      than being clipped. */
   min-height: 77px;
-  padding-top: 10px;
-  padding-bottom: 10px;
   flex-shrink: 0;
   background: var(--bg-2);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
-  padding: 0 16px;
+  /* One shorthand, not a shorthand after two longhands. padding-top and
+     padding-bottom were set above and then reset to zero by `padding: 0 16px`
+     a few lines later, so the bar has had no vertical padding at all whatever
+     the comment above it claimed. Invisible while the composer is a fixed 50px
+     inside a 77px bar, because align-items: center hides the gap; make the
+     composer any taller and the box fills the bar edge to edge and touches the
+     top of the window. */
+  padding: 10px 16px;
   gap: 14px;
 }
 

From 2cad8a93ca04819b11ad2bcf5fba3a54e9e3dae0 Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 15:04:04 +0100
Subject: [PATCH 3/6] Put the composer on two rows, and the loaded track in it

The top bar was one row of controls competing for the same horizontal space,
with the Collapse row on a line of its own underneath: three lines of bar for
two lines of content, and on a narrow window the search field and the Extract
chips squeezed each other.

It is a grid now. Row one is the import gesture, left to right: upload, the
search field, the loaded track, then the two things that act on it. Row two is
Extract and its chips, with the Collapse row sharing that line at its right
hand end.

The search and the chips share column one. That is what makes them exactly the
same width, without either being measured against the other: as a flex row the
search grew into whatever was left over and ran past the last chip, and the
fixed indent that lined its left edge up with the first chip was the width of
the English word "Extract" and drifted in every other language.

Two blocks moved in the markup rather than being positioned on top of the
layout. The now-playing block came out of the footer, where it filled the
gutter beside a timeline that is no longer there; the Collapse row came out of
the composer's stack and into the grid. Both are cells now, so they push the
things around them instead of overlapping when a window gets narrow.

What gives way, and in what order, is measured rather than picked. The chips
need 655px at their widest, the toggles 280, Detect structure 164 and Split
stems 140, which is 1299px of composer before the loaded track gets a pixel.
Below roughly 1450 the track card goes first, since the track is named in the
library and the mixer too; below 1320 the Collapse row drops to a line of its
own, which is where it used to live.

Three things went with the footer's waveform strip. The strip itself, which
duplicated the lane waveforms above it; the Timeline toggle, which governed a
region with nothing visible left in it; and the dashed rectangles the
multitrack library draws on empty lanes, which offer a drag and drop this app
does not do.

Detect structure reads as a switch rather than a word to press. Same markup,
same aria-pressed, drawn from two pseudo elements.
---
 static/css/daw.css               | 532 ++++++++++++++++++++++++++++++-
 static/index.html                | 106 +++---
 tests/e2e/panel-toggles.spec.mjs |  23 +-
 3 files changed, 593 insertions(+), 68 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index ddeeac1a..9891059e 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -53,11 +53,11 @@ input, textarea { font-family: inherit; }
   align-items: center;
   /* One shorthand, not a shorthand after two longhands. padding-top and
      padding-bottom were set above and then reset to zero by `padding: 0 16px`
-     a few lines later, so the bar has had no vertical padding at all whatever
-     the comment above it claimed. Invisible while the composer is a fixed 50px
-     inside a 77px bar, because align-items: center hides the gap; make the
-     composer any taller and the box fills the bar edge to edge and touches the
-     top of the window. */
+     a few lines later, so the bar had no vertical padding at all whatever the
+     comment above claimed. Invisible while the composer was a fixed 50px
+     inside a 77px bar, because align-items: center hid the gap; give the
+     composer a second row and the box fills the bar edge to edge and touches
+     the top of the window. */
   padding: 10px 16px;
   gap: 14px;
 }
@@ -4118,3 +4118,525 @@ input, textarea { font-family: inherit; }
 .lane-key.unsupported { opacity: 0.35; }
 .lane-key.locked .lane-key-step,
 .lane-key.unsupported .lane-key-step { cursor: not-allowed; }
+
+/* ─────────────────────────────────────────────────────────────────────────
+   The composer, in two rows.
+
+   It was one row: the search, the Extract chips and the two actions all
+   competing for the same horizontal space, with the Collapse row on a line of
+   its own underneath. Three lines of bar for two lines of content, and on a
+   narrow window the search and the chips squeezed each other.
+
+   It is a grid now. Row one is the import gesture, left to right: upload, the
+   search field, the loaded track, then the two things that act on it. Row two
+   is Extract and its chips, with the Collapse row sharing that line at the
+   right-hand end.
+
+   The search and the chips share column one, which is what makes them exactly
+   the same width. As a flex row the search grew into whatever was left over
+   and ran past the last chip; sharing a track means the chips size the column
+   and the search follows, in any language.
+   ───────────────────────────────────────────────────────────────────────── */
+
+/* 1. Two rows, arranged as in the mockup.
+
+   Row one is the whole import gesture, left to right: upload, the search
+   field, then the two things that act on it, Detect structure and Split
+   stems. Row two is Extract and its chips, on their own full-width line.
+
+   Done with order and flex-basis rather than by moving markup. The stem
+   section is the only child pushed to a second line, so it is the only one
+   that needs a basis of 100%, and everything else stays on line one in DOM
+   order. Nothing here restyles a control: same pills, same buttons, same
+   colours, only where they sit.
+
+   The style in the mockup that is deliberately NOT copied: Detect structure
+   as a switch with a help icon, and the search field boxed separately from
+   upload. Those are a restyle, and you asked for the organisation only. */
+.daw-composer {
+  /* A grid, not a wrapping row, so the search and the chips share one column
+     and are therefore exactly the same width. As a flex row the search grew to
+     whatever was left over, which is why it ran past the last chip.
+
+     Columns: content | spacer | rule | detect | split. Row one is the import
+     gesture, row two is what to extract. */
+  height: auto;
+  display: grid;
+  /* minmax(0, 1fr), not 1fr: a grid track's automatic minimum is its
+     min-content, so a plain 1fr refuses to shrink below the widest thing in
+     it. The card sat at its natural width and pushed Split stems off the right
+     edge of its own container. Zero as the floor lets the column give way, and
+     the card's own text clips with an ellipsis rather than forcing the row. */
+  grid-template-columns: minmax(0, max-content) minmax(0, 1fr) auto auto auto;
+  align-items: center;
+  row-gap: 8px;
+  column-gap: 10px;
+  padding: 8px 10px;
+  overflow: visible;
+}
+
+/* Row one, column one. Starts on the EXTRACT label rather than on the All
+   chip, so the row has no indent to pay for, and stretches to end where the
+   chips end. 14px is the stem section's own left padding, not a measured
+   English width, so this alignment holds in every language. */
+.daw-composer > .daw-url-zone {
+  --row1-indent: 14px;
+  grid-column: 1;
+  grid-row: 1;
+  /* Both sides, not just the left. The column is sized by the stem section,
+     which carries 14px of padding at each end, so a margin only on the left
+     left the search running 14px past the Other chip. Matching it on the right
+     puts the two edges on the same pixel. */
+  margin-left: var(--row1-indent);
+  margin-right: var(--row1-indent);
+  background: var(--bg-2);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  height: 36px;
+  min-height: 36px;
+  padding: 0 10px 0 6px;
+  gap: 6px;
+}
+/* Inside the box, flat against it, not a box of its own. order rather than
+   markup: the button keeps its place in the DOM, so tab order and the drop
+   handlers bound to .url-wrap are untouched. */
+.daw-url-zone > .daw-upload-btn {
+  order: -1;
+  width: 26px;
+  height: 26px;
+  border: none;
+  background: none;
+}
+.daw-url-zone #url {
+  background: none;
+  border: none;
+  padding: 0;
+  height: auto;
+}
+
+/* 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. */
+.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
+   from the Extract chips, which are on their own line now. */
+/* One rule, down both rows.
+ *
+ * There were two: this one beside the actions, and the Collapse label's own
+ * left border under it. Two rules drawn by different elements have to be kept
+ * level by hand, and they were a pixel apart, which is exactly the kind of gap
+ * that reads as broken without being nameable. Spanning the rows makes it one
+ * line that cannot drift from itself. */
+.daw-composer > .daw-composer-sep {
+  grid-column: 3;
+  grid-row: 1 / 3;
+  display: block;
+  justify-self: center;
+  align-self: stretch;
+  width: 1px;
+  height: auto;
+  margin: 6px 4px;
+  background: var(--border-strong);
+}
+
+/* Detect structure reads as a switch rather than a word you press. The button
+   keeps its markup and its aria-pressed, so nothing about how it works
+   changes; the pill and its knob are drawn from the two pseudo elements.
+   Grid because the switch sits left of the label and spans both the label and
+   the EXPERIMENTAL note under it. */
+.daw-composer > .structure-toggle {
+  grid-column: 4;
+  grid-row: 1;
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  column-gap: 9px;
+  padding: 0 14px;
+  text-align: left;
+}
+.daw-composer > .structure-toggle::before {
+  content: "";
+  grid-row: 1 / 3;
+  width: 34px;
+  height: 19px;
+  border-radius: 999px;
+  background: var(--panel-3);
+  border: 1px solid var(--border-strong);
+  transition: background var(--t-fast);
+}
+.daw-composer > .structure-toggle::after {
+  content: "";
+  position: absolute;
+  left: 17px;
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: var(--fg-2);
+  transition: transform var(--t-fast), background var(--t-fast);
+}
+.daw-composer > .structure-toggle[aria-pressed="true"]::before {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+.daw-composer > .structure-toggle[aria-pressed="true"]::after {
+  transform: translateX(15px);
+  background: #1a1a1a;
+}
+.daw-composer > .structure-toggle .structure-toggle-main { grid-column: 2; }
+.daw-composer > .structure-toggle .structure-toggle-note {
+  grid-column: 2;
+  text-align: left;
+}
+
+/* Row two, and the only thing on it. A 100% basis is what forces the wrap. */
+.daw-composer > .daw-stem-section {
+  order: 1;
+  flex: 1 0 100%;
+  min-width: 0;
+}
+
+/* The two actions keep their shared width and stop being full-bleed. */
+.daw-composer > .structure-toggle,
+.daw-composer > .daw-process-btn {
+  align-self: center;
+  min-height: 40px;
+  border-radius: 8px;
+  border-left: none;
+}
+.daw-composer > .daw-process-btn {
+  grid-column: 5;
+  grid-row: 1;
+}
+
+/* 2. Ten percent off the waveform: REMOVED.
+
+   It did what was asked, 910px down to 819px, and it read as a fault rather
+   than as breathing room: the lanes stopped short while the analysis strip
+   above and the footer below still ran to the window edge, so the waveform
+   looked truncated rather than inset.
+
+   To put it back, the rule was:
+
+     .daw-wave-panel {
+       flex: 1 1 0;
+       max-width: calc((100% - 300px) * 0.9);
+     }
+
+   and it would need the strip and the footer inset to match, or something
+   given the freed space. */
+
+/* Row two, right-hand end: on the chips' line rather than below it.
+
+   Columns 4 to 6, not 3: a spanning item's minimum lands in the first track it
+   covers, so starting at the separator's column handed that 1px column the
+   toggles' whole width and took it out of the card's. The two action columns
+   are already as wide as Detect structure and Split stems, which is more than
+   the toggles need, so spanning only those costs the row nothing.
+
+   A grid item rather than absolutely positioned: out of flow it sat on the
+   right line and would have landed on top of the Extract chips the moment a
+   window was narrow enough for the two to meet. */
+.daw-composer > .daw-panel-toggles {
+  grid-column: 4 / 6;
+  grid-row: 2;
+  justify-self: end;
+  align-self: center;
+  width: auto;
+  min-width: 0;
+  margin: 0;
+  /* The wrapper stops being a box of its own: each toggle is a chip now, so a
+     frame around the group would be a box inside a box. */
+  padding: 0;
+  background: none;
+  border: none;
+  gap: 6px;
+}
+
+/* 4. The toggles become chips, the same size as the Extract ones.
+   Everything below is the .stem-choice geometry, nothing else: same height,
+   padding, radius, border and type size, so the two rows read as one family.
+   The colours stay theirs, including the strike-through that means a panel is
+   put away. */
+.daw-composer-stack .daw-panel-toggle {
+  height: 30px;
+  padding: 0 11px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 12px;
+  letter-spacing: -0.005em;
+  text-transform: none;
+  display: inline-flex;
+  align-items: center;
+}
+/* The label and the separators were sized for an 8px row; at chip size the
+   dots between them are noise, so only the label survives. */
+/* No border of its own any more: the rule beside it spans both rows now, so a
+   second one drawn here would be the thing it used to be kept level with. */
+.daw-composer-stack .daw-panel-toggles-label {
+  font-size: 12px;
+  letter-spacing: -0.005em;
+  text-transform: none;
+  margin-right: 4px;
+  padding: 0;
+  border: none;
+}
+.daw-composer-stack .daw-panel-toggles-sep { display: none; }
+
+/* 5. The dashed rectangles on empty lanes.
+
+   Not ours. The vendored multitrack plugin draws one on any track with no
+   audio: an absolutely positioned div at z-index 10 with dragover and drop
+   handlers, so a file can be dragged onto an empty lane. In StemDeck an empty
+   lane is a stem that was not extracted, and dropping audio onto one is not a
+   thing the app does, so it is an affordance for a feature that does not
+   exist.
+
+   Hidden rather than patched out of the vendor file: that file is refreshed
+   from upstream, and an edit to it would be lost on the next update. The
+   selector matches on the inline style because the plugin gives these divs no
+   class of their own. */
+.daw .wave-scroll div[style*="2px dashed"] {
+  display: none !important;
+}
+
+/* 6. The loaded track, named in the composer.
+
+   It was in the footer, filling the gutter beside the timeline, which existed
+   because that timeline's left edge had to line up with the lane waveforms.
+   The timeline is gone, and this row had empty space in the middle of it, so
+   the block moved in the markup rather than being pinned here: it is a cell in
+   the grid, column two, spanning both rows. That is the column the search and
+   the chips do not use, between them and the actions on the right. */
+#nowPlayingPanel {
+  position: relative;
+  grid-column: 2;
+  grid-row: 1 / 3;
+  justify-self: stretch;
+  align-self: stretch;
+  /* .footer-track-slot is `width: var(--daw-col-w)`, which is the gutter width
+     it was built to fill in the footer. Here the column decides the width, so
+     the fixed one has to go or the card never shrinks and pushes Split stems
+     out of the composer on a narrow window. */
+  width: auto;
+  min-width: 0;
+  margin: 0 14px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 6px;
+  padding: 0 14px;
+  background: var(--panel-2, var(--panel));
+  border: 1px solid var(--border);
+  border-radius: 8px;
+}
+
+/* The footer clamps the title to two lines, because its gutter is narrow and
+   a long name would otherwise be cut after three or four words. This card is
+   wide and short, so two lines is what makes it look cramped: the title grows
+   downwards and shoves the meta line onto the bottom edge. One line with an
+   ellipsis instead, which is what .daw-track-title does everywhere else. */
+#nowPlayingPanel .track-panel-title {
+  display: block;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.25;
+}
+
+/* A quieter frame. At --border-strong on --bg-2 the card was the loudest box
+   in the bar, competing with the search field beside it for a thing you read
+   rather than use. */
+#nowPlayingPanel {
+  background: var(--panel-2, var(--panel));
+  border-color: var(--border);
+}
+
+/* The footer's own 40px cover, untouched. */
+#nowPlayingPanel .track-panel-head {
+  gap: 11px;
+  align-items: center;
+  justify-content: flex-start;
+}
+#nowPlayingPanel .track-panel-info { flex: 1 1 auto; min-width: 0; }
+/* A flex item's automatic minimum is its content, all the way down, so one
+   missing min-width anywhere in this chain gives the card a floor it will not
+   go below and the row overflows instead. The title and the meta line both
+   clip with an ellipsis, so there is nothing to protect by refusing. */
+#nowPlayingPanel .track-panel-head,
+#nowPlayingPanel .daw-track-meta-line { min-width: 0; }
+/* Part of the card's structure rather than a button placed on top of it.
+ *
+ * It has been tried two ways and both read as dropped in: on the title's line
+ * it sat at the right edge with a gap in front of it, and centred on the card
+ * it lined up with neither row. The trouble was never the height, it was that
+ * a bordered button inside a bordered card is a box in a box, floating in
+ * whatever space is left over.
+ *
+ * So it gets a segment of its own, full height, separated by the same hairline
+ * the composer uses between its clusters. The icon then has a place rather than
+ * a position, and the card reads as two parts: what the track is, and the one
+ * thing you can do to it from here. */
+#nowPlayingPanel .track-panel-head .daw-fav-btn {
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  transform: none;
+  margin: 0;
+  width: 46px;
+  height: auto;
+  border: none;
+  border-left: 1px solid var(--border);
+  border-radius: 0 8px 8px 0;
+  background: none;
+  color: var(--muted);
+}
+#nowPlayingPanel .track-panel-head .daw-fav-btn:hover {
+  background: var(--panel-3);
+  color: var(--fg);
+}
+#nowPlayingPanel .track-panel-head .daw-fav-btn svg {
+  width: 17px;
+  height: 17px;
+}
+/* The text stops where the segment starts. */
+#nowPlayingPanel .track-panel-info,
+#nowPlayingPanel .daw-track-meta-line { padding-right: 56px; }
+
+/* Source and quality keep their footer colours, which up here is four accents
+   in one short line. Muted to one voice; the stems dot keeps its colour,
+   because that one means ready rather than merely saying a word. */
+#nowPlayingPanel .daw-track-meta-line #track-source,
+#nowPlayingPanel .daw-track-meta-line #track-quality,
+#nowPlayingPanel .daw-track-meta-line #t-stems-chip {
+  color: var(--muted);
+}
+#nowPlayingPanel .daw-track-meta-line {
+  /* Indented to start under the title rather than under the artwork, and kept
+     to one line so the card holds its shape whatever the track is called. The
+     footer lets it wrap, because its gutter is narrow and tall; this one is
+     wide and short.
+
+     Not indented under the title either: the 51px that would cost is the
+     difference between the line fitting and ending in an ellipsis. */
+  margin: 0;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 7. The whole waveform strip in the bottom bar.
+
+   Read this before keeping it. The strip is three things in one: the waveform
+   drawing, the time ticks, and the scrub, which is the footer's seek control
+   and its only progress indicator. All three go together here, so after this
+   the only way to move through a track is the lanes above, and the footer no
+   longer shows where you are.
+
+   If that turns out to be too much, hiding #footer-waveform alone removes the
+   drawing and leaves the ticks and the seek working. */
+.footer-wave-panel {
+  display: none !important;
+}
+
+/* 8. The Timeline toggle.
+
+   It hides .footer-wave-region, which wraps two things: the waveform strip,
+   now hidden outright by 7, and the now-playing block, now pinned into the top
+   bar by 6. A fixed-position element is still hidden when an ancestor is
+   display: none, so the only thing pressing Timeline would do now is make the
+   card in the top bar disappear. A control whose label names something that is
+   not there, doing something the label does not describe.
+
+   Two parts, and the second matters as much as the first. The button is hidden
+   here, but it stays in the DOM, so wireAllToggle still counts "timeline"
+   among the panels All governs: pressing All would set panel-timeline-off and
+   take the card with it. Neutralising the rule is what stops that. Doing this
+   properly means dropping the button from the markup and letting the All row
+   govern two panels rather than three. */
+.daw-panel-toggle[data-panel="timeline"],
+.daw-panel-toggle[data-panel="timeline"] + .daw-panel-toggles-sep,
+.daw-panel-toggles-sep:has(+ .daw-panel-toggle[data-panel="timeline"]) {
+  display: none !important;
+}
+.app.panel-timeline-off .footer-wave-region {
+  display: block;
+}
+
+/* 9. A file extension where a track has no artwork.
+
+   Paired with extLabel() in catalog.js, which decides when there is one to
+   show. Sized in ch so WAV and FLAC both sit inside the same square without
+   the label being measured for the longest case. */
+.thumb-ext {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  font-family: var(--font-mono, inherit);
+}
+.np-art-placeholder[data-ext]:not([data-ext=""]) svg { display: none; }
+.np-art-placeholder[data-ext]:not([data-ext=""])::after {
+  content: attr(data-ext);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: var(--muted);
+  font-family: var(--font-mono, inherit);
+}
+
+/* 10. The empty state's lanes, lined up with the mixer beside them.
+
+   Two things were out. The placeholder lane is a hard 48px in waves.css while
+   every mixer row is sized from --lane-h, which is 77px on an empty studio, so
+   the two columns ran at different pitches from the first row. And there are
+   seven placeholders, one per stem plus "original", against six visible mixer
+   rows, because the original row is hidden until a job is actually loaded.
+
+   So: take the height from the same variable the mixer uses, minus the 2px
+   separator that makes up the rest of the row, and drop the original
+   placeholder while its mixer row is hidden. */
+.lane-placeholder {
+  height: calc(var(--lane-h, 72px) - 2px);
+  margin-bottom: 2px;
+}
+.app.no-track .lane-placeholder[data-stem="original"] {
+  display: none;
+}
+
+/* Below about 1450px the two rows cannot hold everything.
+ *
+ * Measured rather than picked: the chips need 655px at their widest, the
+ * toggles 280, Detect structure 164 and Split stems 140. With gaps and the
+ * bar's own padding that is 1299px of composer before the card gets a pixel,
+ * which is a window of roughly 1450 once the rail and the margins are paid
+ * for.
+ *
+ * So the two things that were moved up here give way, in the order they can be
+ * done without: the card first, since the track is also named in the library
+ * and the mixer, then the toggles drop to a line of their own, which is where
+ * they lived before. Nothing is lost at any width, it just stops being one
+ * line.
+ */
+@media (max-width: 1460px) {
+  .daw-composer > #nowPlayingPanel { display: none; }
+}
+@media (max-width: 1320px) {
+  .daw-composer > .daw-panel-toggles {
+    grid-column: 1 / -1;
+    grid-row: 3;
+    justify-self: end;
+  }
+}
diff --git a/static/index.html b/static/index.html
index 37e99874..29ca08ca 100644
--- a/static/index.html
+++ b/static/index.html
@@ -138,14 +138,49 @@
             <span class="structure-toggle-note" data-i18n="structure.experimental">Experimental</span>
           </button>
 
-          <!-- Process button -->
-          <button id="submit" class="daw-process-btn" type="submit">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-              <path d="M13 2 3 14h7l-1 8 10-12h-7z"/>
-            </svg>
-            <span data-i18n="process.splitStems">Split stems</span>
-          </button>
-        </form>
+          <!-- The loaded track, named where the two rows leave room for it.
+               It used to fill the gutter beside the footer timeline. That
+               timeline is gone, and this row had empty space in the middle. -->
+          <div class="footer-track-slot" id="nowPlayingPanel">
+          <div class="track-panel-head">
+            <div class="daw-cover track-panel-cover" id="np-art">
+              <div class="np-art-placeholder" aria-hidden="true">
+                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5">
+                  <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
+                </svg>
+              </div>
+              <img id="np-thumb" class="np-art-img" alt="" referrerpolicy="no-referrer" />
+            </div>
+            <div class="track-panel-info">
+              <div class="daw-track-title track-panel-title" id="title">—</div>
+            </div>
+            <button class="daw-fav-btn" id="fav-btn" aria-label="Toggle favorite" data-i18n-aria-label="fav.toggleAria" aria-pressed="false">
+              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
+              </svg>
+            </button>
+          </div>
+
+          <div class="daw-track-meta-line">
+            <span class="num" id="t-meta-duration">—</span>
+            <span class="daw-track-sep" aria-hidden="true">·</span>
+            <span id="t-stems-chip">— stems</span>
+            <span class="daw-track-sep" aria-hidden="true">·</span>
+            <span id="track-source">—</span>
+            <span class="daw-track-sep" aria-hidden="true">·</span>
+            <span id="track-quality">—</span>
+            <span class="daw-track-sep" aria-hidden="true">·</span>
+            <span><span data-i18n="footer.extractedLabel">Extracted</span> <span id="track-extracted">—</span></span>
+          </div>
+
+          <!-- Hidden spans for JS compat: not shown, but still written to
+               (t-time is superseded here by the Position group in the
+               controls row -- keeping it live would just duplicate that
+               readout next to the title). -->
+          <div style="display:none" aria-hidden="true">
+            <span id="t-time"></span><span id="t-bpm"></span><span id="t-key"></span><span id="track-artist"></span>
+          </div>
+          </div>
 
         <!-- Panel toggles (#480). Every panel around the mixer is useful and
              none of them is useful all the time, so the fix is a way to put one
@@ -187,12 +222,18 @@
                   title="Show or hide the sections bar" data-i18n-title="panels.sectionsTitle" data-i18n-aria-label="panels.sectionsTitle">
             <span data-i18n="sections.title">Sections</span>
           </button>
-          <span class="daw-panel-toggles-sep" aria-hidden="true">-</span>
-          <button class="daw-panel-toggle" type="button" data-panel="timeline" aria-pressed="true"
-                  title="Show or hide the timeline" data-i18n-title="panels.timelineTitle" data-i18n-aria-label="panels.timelineTitle">
-            <span data-i18n="panels.timeline">Timeline</span>
-          </button>
         </div>
+
+          <!-- Process button -->
+          <button id="submit" class="daw-process-btn" type="submit">
+            <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+              <path d="M13 2 3 14h7l-1 8 10-12h-7z"/>
+            </svg>
+            <span data-i18n="process.splitStems">Split stems</span>
+          </button>
+        </form>
+
+
         </div><!-- /.daw-composer-stack -->
         <!-- Hidden collapsed strip (JS compatibility) -->
         <div class="hidden" id="appbarStrip" aria-hidden="true" style="display:none!important">
@@ -932,46 +973,7 @@
                It exists because the timeline's left edge has to land on the
                lane waveforms' left edge; the loaded track's identity fills it
                rather than leaving 300px of nothing under the controls. -->
-          <div class="footer-track-slot" id="nowPlayingPanel">
-          <div class="track-panel-head">
-            <div class="daw-cover track-panel-cover" id="np-art">
-              <div class="np-art-placeholder" aria-hidden="true">
-                <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5">
-                  <path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>
-                </svg>
-              </div>
-              <img id="np-thumb" class="np-art-img" alt="" referrerpolicy="no-referrer" />
-            </div>
-            <div class="track-panel-info">
-              <div class="daw-track-title track-panel-title" id="title">—</div>
-            </div>
-            <button class="daw-fav-btn" id="fav-btn" aria-label="Toggle favorite" data-i18n-aria-label="fav.toggleAria" aria-pressed="false">
-              <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
-                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
-              </svg>
-            </button>
-          </div>
 
-          <div class="daw-track-meta-line">
-            <span class="num" id="t-meta-duration">—</span>
-            <span class="daw-track-sep" aria-hidden="true">·</span>
-            <span id="t-stems-chip">— stems</span>
-            <span class="daw-track-sep" aria-hidden="true">·</span>
-            <span id="track-source">—</span>
-            <span class="daw-track-sep" aria-hidden="true">·</span>
-            <span id="track-quality">—</span>
-            <span class="daw-track-sep" aria-hidden="true">·</span>
-            <span><span data-i18n="footer.extractedLabel">Extracted</span> <span id="track-extracted">—</span></span>
-          </div>
-
-          <!-- Hidden spans for JS compat: not shown, but still written to
-               (t-time is superseded here by the Position group in the
-               controls row -- keeping it live would just duplicate that
-               readout next to the title). -->
-          <div style="display:none" aria-hidden="true">
-            <span id="t-time"></span><span id="t-bpm"></span><span id="t-key"></span><span id="track-artist"></span>
-          </div>
-          </div>
 
           <div class="footer-wave-col">
           <div class="footer-wave-panel">
diff --git a/tests/e2e/panel-toggles.spec.mjs b/tests/e2e/panel-toggles.spec.mjs
index 140ce40e..c176a054 100644
--- a/tests/e2e/panel-toggles.spec.mjs
+++ b/tests/e2e/panel-toggles.spec.mjs
@@ -1,15 +1,19 @@
-// The Collapse row governs three panels. Not the library.
+// The Collapse row governs the panels beside it. Not the library.
 //
 // "All" used to take the library with it, and nothing in the row could put it
-// back: the three buttons beside it only know about their own panels. So the
-// reported sequence was press All, then turn Analysis, Sections and Timeline
-// back on one at a time, and watch All light up as though everything had
-// returned while the library stayed collapsed with no way to reach it from
-// there (#588). The library has its own control in the rail.
+// back: the buttons beside it only know about their own panels. So the
+// reported sequence was press All, then turn each panel back on one at a time,
+// and watch All light up as though everything had returned while the library
+// stayed collapsed with no way to reach it from there (#588). The library has
+// its own control in the rail.
+//
+// Two panels now, not three. Timeline went with the footer's waveform strip:
+// it governed a region that no longer has anything visible in it, so the
+// button named something that was not there.
 import { test, expect } from "@playwright/test";
 import { openStudio } from "./helpers.mjs";
 
-const PANELS = ["analysis", "sections", "timeline"];
+const PANELS = ["analysis", "sections"];
 
 const state = (page) =>
   page.evaluate((panels) => {
@@ -64,10 +68,7 @@ test.describe("collapse row", () => {
     expect((await state(page)).allPressed).toBe(true);
 
     await clickPanel(page, "sections");
-    expect((await state(page)).allPressed).toBe(true);
-
-    await clickPanel(page, "timeline");
-    expect((await state(page)).allPressed, "all three away, so the row is away").toBe(false);
+    expect((await state(page)).allPressed, "both away, so the row is away").toBe(false);
   });
 
   test("collapsing the library does not change what All reports", async ({ page }) => {

From 76054506ca1bfd93f1eab9725d6b40b20c912f5a Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 16:08:54 +0100
Subject: [PATCH 4/6] Hold the click-track hint's line so the lanes never move

On the first track of a session the waveform lanes sat 3px lower than their own
faders, then 6, then 9, all the way down the stack. Every later track was fine,
and going back to the first one fixed it.

The cause is a layout change arriving a second late. The hint under the footer,
"Clicking 127.0 BPM, 77% of beats sit on a drum hit", is text from the beat
analysis. It was display: none until it had something to say, and then took
22px off the wave panel when it did.

Lane heights are divided out of that panel and then baked into the multitrack
as its tracks are built. On the first track that build happens before the hint
arrives, so the lanes keep the taller row while the mixer, sized in CSS from
--lane-h, follows the shorter one. Every later track is built after the hint
already exists, which is exactly why only the first one was ever wrong.

So the line is reserved rather than the change reacted to. The alternative was
re-measuring afterwards, and it does not work: a lane's height reaches the DOM
through the multitrack's own render, and calling setOptions on the wavesurfer
afterwards does not move the row it has already built.

Measured before and after, first track then second: 77 against 74 becomes 74
and 74, and the second stays 86 and 86. Three cold sessions with three
different first tracks, zero drift on every row.

Two tests. One that the first track lines up, and one that the hint occupies
the same height whether or not it has anything to say, which is the property
holding the rest up. The second fails without this change.
---
 static/css/daw.css                | 26 ++++++++++++++++++++-
 tests/e2e/lane-alignment.spec.mjs | 38 +++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index 9891059e..5975311a 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -3126,7 +3126,31 @@ input, textarea { font-family: inherit; }
   font-size: 11px; line-height: 1.3; color: var(--muted);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.metro-note:empty { display: none; }
+/* Holds its line even while it has nothing to say.
+ *
+ * This text arrives with the beat analysis, a second or so after a track opens,
+ * and it used to arrive as a layout change: `display: none` while empty, then
+ * 14px of text plus its margin, which took 22px off the wave panel underneath.
+ *
+ * That matters because the lane heights are decided from the panel's height
+ * and then baked into the multitrack when its tracks are built. On the first
+ * track of a session the lanes are built before this line appears, so they
+ * keep the taller row while the mixer, sized in CSS from --lane-h, follows the
+ * shorter one. The two columns then drift by 3px a row, all the way down the
+ * stack, and a stem's name ends up on a different line from its own waveform.
+ * Every later track is built after this line already exists, which is exactly
+ * why the fault only ever showed on the first one.
+ *
+ * Reserving the line removes the change rather than reacting to it. The
+ * alternative was re-measuring after the fact, and that does not work: a
+ * lane's height reaches the DOM through the multitrack's own render, and
+ * setOptions on the wavesurfer afterwards does not move the row it built.
+ */
+.metro-note:empty {
+  display: block;
+  visibility: hidden;
+}
+.metro-note:empty::before { content: "a0"; }
 .metro-note.warn { color: var(--danger); }
 
 /* Export chip button */
diff --git a/tests/e2e/lane-alignment.spec.mjs b/tests/e2e/lane-alignment.spec.mjs
index a37c16fb..d5d56ce8 100644
--- a/tests/e2e/lane-alignment.spec.mjs
+++ b/tests/e2e/lane-alignment.spec.mjs
@@ -98,4 +98,42 @@ test.describe("lane alignment", () => {
       expect(Math.abs(nameMid - g.waveMids[i])).toBeLessThanOrEqual(2);
     }
   });
+  // The first track of a session is the one whose lanes are built before the
+  // click-track hint has arrived under the footer. That hint is text from the
+  // beat analysis: it used to be display: none until it had something to say,
+  // and then take 22px off the wave panel when it did. The lanes had already
+  // baked in the taller row by then, while the mixer follows --lane-h and moved
+  // to the shorter one, so the two drifted 3px a row down the stack.
+  //
+  // Reserving its line is the fix, so this asserts the thing that made the
+  // difference: the wave panel is the same height before and after the hint
+  // arrives, and the first track lines up like any other.
+  test("the first track of a session lines up like the second", async ({ page }) => {
+    await page.setViewportSize({ width: 1600, height: 900 });
+    await openStudio(page, { tauri: true });
+    await waitForClickTrack(page, { revealOptions: false });
+
+    const first = await geometry(page);
+    expect(first.waveTops).toEqual(first.mixTops);
+  });
+
+  test("the click-track hint holds its line while it is empty", async ({ page }) => {
+    await page.setViewportSize({ width: 1600, height: 900 });
+    await openStudio(page, { tauri: true });
+
+    // Whatever it says, and whether it says anything at all, it occupies the
+    // same space. An empty one that collapses is a layout change arriving a
+    // second after the track opens, which is what the lanes cannot survive.
+    const { empty, filled } = await page.evaluate(() => {
+      const note = document.querySelector(".metro-note");
+      const was = note.textContent;
+      note.textContent = "";
+      const empty = Math.round(note.getBoundingClientRect().height);
+      note.textContent = was || "Clicking 120.0 BPM";
+      const filled = Math.round(note.getBoundingClientRect().height);
+      note.textContent = was;
+      return { empty, filled };
+    });
+    expect(empty).toBe(filled);
+  });
 });

From f0f92f50781e48ff443c856a45b1b82fabbb1bfe Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 16:09:32 +0100
Subject: [PATCH 5/6] Keep the click-track controls on the row when there is no
 grid

Open the app with nothing loaded and half the control strip is missing:
Count-in, the bar selector, Grid and the rate buttons are not there. Load a
track and they appear. It reads as a fault rather than as a state.

They were hidden outright whenever a track had no beat grid, and with no track
at all. The reason is in the code's own comment: the options are worth about
700px, roughly half the strip, so taking them away was how the footer kept
fitting. That made them the one thing in that row behaving differently from
everything else. The metronome button beside them is disabled rather than
removed, and so is every unavailable lane in the mixer.

So they stay and go inert: a class that greys them, and `disabled` on each
control, which is also what a screen reader is told rather than being shown a
live-looking panel that does nothing.

The cost is real and worth stating. The strip is now permanently that 700px
wider, so the footer folds the options behind the chevron at a wider window
than it used to. At 1920 they are inline whether or not a track is loaded; at
1600 they are behind the chevron in both states, where the empty studio used to
look roomy because half the row was absent.
---
 static/css/daw.css     | 10 ++++++++++
 static/index.html      |  2 +-
 static/js/transport.js | 39 +++++++++++++++++++++++++++++++++++----
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index 5975311a..306214fd 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -4664,3 +4664,13 @@ input, textarea { font-family: inherit; }
     justify-self: end;
   }
 }
+
+/* The click-track options with nothing to act on.
+ *
+ * They stay on the row and go quiet rather than leaving it, which is how the
+ * metronome button beside them and every unavailable lane in the mixer already
+ * behave. Half a control strip appearing and vanishing reads as a fault. */
+.footer-metro-panel.unavailable {
+  opacity: 0.4;
+  pointer-events: none;
+}
diff --git a/static/index.html b/static/index.html
index 29ca08ca..ac1ffaa5 100644
--- a/static/index.html
+++ b/static/index.html
@@ -849,7 +849,7 @@
                   <input type="range" id="t-metro-vol" class="metro-vol-slider" min="0" max="1" step="0.05" value="0.6" aria-label="Click volume" data-i18n-aria-label="click.volumeAria">
                 </div>
               </div>
-              <div class="footer-metro-panel hidden" id="t-metro-panel" role="group" aria-label="Click track options" data-i18n-aria-label="click.optionsAria">
+              <div class="footer-metro-panel unavailable" id="t-metro-panel" role="group" aria-label="Click track options" data-i18n-aria-label="click.optionsAria">
                 <span class="metro-select-wrap">
                   <select id="t-metro-countin" class="metro-select" title="Bars of click before the song starts when you press play" data-i18n-title="click.countInTitle" aria-label="Count-in" data-i18n-aria-label="click.countIn">
                     <option value="0" selected data-i18n="click.countInOff">Count-in: off</option>
diff --git a/static/js/transport.js b/static/js/transport.js
index 82dfbb9e..3b610a9c 100644
--- a/static/js/transport.js
+++ b/static/js/transport.js
@@ -919,6 +919,11 @@ function wireLaneScrollSync() {
 // ─── Wire transport buttons ───
 
 export function wireTransportButtons() {
+  // Inert until a track with a beat grid arrives. The markup ships the panel
+  // greyed so there is no flash of live-looking controls before this runs, but
+  // greyed is only a look: this is what actually makes them unusable, and what
+  // a screen reader is told.
+  setMetroOptionsAvailable(false);
   playBtn.addEventListener("click", togglePlayPause);
   playMiniBtn?.addEventListener("click", togglePlayPause);
   stopBtn.addEventListener("click", stopTransport);
@@ -1321,6 +1326,31 @@ function _renderMetroNote(grid) {
   metroNoteEl.className = Number.isFinite(conf) && conf < 60 ? "metro-note warn" : "metro-note";
 }
 
+/**
+ * Show the click-track options whether or not there is a grid to act on.
+ *
+ * They used to be hidden outright when a track had no beat grid, and with no
+ * track at all, so the footer lost Count-in, the bar selector, Grid and the
+ * rate buttons and then got them back. Half the strip appearing and vanishing
+ * reads as a fault rather than as a state, and it is the one thing in that row
+ * that does not behave like the rest: the metronome button beside them, and
+ * every unavailable lane in the mixer, grey out rather than leave.
+ *
+ * So the panel stays and its controls go inert, which is also what the
+ * disabled attribute already tells a screen reader.
+ */
+function setMetroOptionsAvailable(available) {
+  if (!metroPanel) return;
+  // "hidden" is the collapse levels' own word for this panel, and it shipped in
+  // the markup as the starting state. Availability no longer uses it, so clear
+  // it once and let footerFit be the only thing that sets it.
+  metroPanel.classList.remove("hidden");
+  metroPanel.classList.toggle("unavailable", !available);
+  for (const el of metroPanel.querySelectorAll("button, select, input")) {
+    el.disabled = !available;
+  }
+}
+
 export function updateMetronomeAvailability(grid, reason = "") {
   if (!metroBtn) return;
   _lastGrid = grid || null;
@@ -1333,17 +1363,18 @@ export function updateMetronomeAvailability(grid, reason = "") {
     // does have a grid; only the live toggle goes off.
     metroBtn.classList.remove("active");
     metroBtn.setAttribute("aria-pressed", "false");
-    metroPanel?.classList.add("hidden");
+    setMetroOptionsAvailable(false);
     if (metroNoteEl) { metroNoteEl.textContent = reason || ""; metroNoteEl.className = "metro-note"; }
-    // The options are worth ~700px of the control strip, about half of it, so
-    // them appearing or going away changes whether the rest of the row fits.
+    // Still re-fits: the options keep their width now rather than leaving, so
+    // the row is wider in this state than it used to be and may need to
+    // collapse a level it did not before.
     refitFooter();
     return;
   }
 
   metroBtn.classList.toggle("active", metronomeEnabled);
   metroBtn.setAttribute("aria-pressed", metronomeEnabled ? "true" : "false");
-  metroPanel?.classList.remove("hidden"); // undo a previous track's "unavailable" hide
+  setMetroOptionsAvailable(true);
   refitFooter(); // see the matching call on the unavailable path above
   setMetronomeHasBars(Array.isArray(grid.bars) && grid.bars.length > 0);
   const autoOpt = metroBarEl?.querySelector('option[value="-1"]');

From 21ffed880681cd94a6ff6a2c1a8280f51f6057de Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Tue, 22 Sep 2026 16:22:59 +0100
Subject: [PATCH 6/6] Stop the footer controls moving when a track loads

Two things shifted in the footer, both because something beside them changed
size, and both measured rather than eyeballed.

Clicking a track pushed every cluster right of Position across by 17px: Speed
from 851 to 868, Global key 977 to 995, Click track 1139 to 1157. The readouts
go from 0:00 to 05:09 when a duration arrives, which is one character wider,
and Position grew with them. Both readouts now hold the width of mm:ss whatever
they are showing, with tabular figures so the digits do not jog either. The
space is reserved rather than the format zero-padded, because how it reads is
the readout's own business: a short track should still say 5:09, and one over
an hour should still grow.

And the click-track hint sat 18px left of everything else, against the bare
edge of the footer. It had no left inset of its own because it inherited one
from the gutter the now-playing block used to fill. That block is in the
composer now and the gutter went with it, so the hint needs its own, and starts
on the same x as Transport.
---
 static/css/daw.css | 25 +++++++++++++++++++++++--
 1 file changed, 23 insertions(+), 2 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index 306214fd..a47219f2 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -2657,11 +2657,28 @@ input, textarea { font-family: inherit; }
      the text bottom meeting the border bottom. */
   line-height: 22px;
 }
+/* Both readouts hold the width of mm:ss whatever they are showing.
+ *
+ * They start at 0:00 and become 05:09 the moment a track loads, which is one
+ * character wider. The Position cluster grew 17px with it and every cluster to
+ * its right, Speed, Global key and Click track, slid across by the same
+ * amount. Clicking a track should not move the buttons beside it.
+ *
+ * Reserved rather than zero-padded, because the format is the readout's own
+ * business: a track under ten minutes reads 5:09 and should keep doing so. A
+ * track over an hour still grows, and should. */
 .footer-elapsed {
   font-size: 18px; font-weight: 500; letter-spacing: -0.02em; color: var(--fg);
+  display: inline-block;
+  min-width: 5ch;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
 }
 .footer-total {
   font-size: 12px; font-weight: 400; color: var(--muted-2);
+  display: inline-block;
+  min-width: 5ch;
+  font-variant-numeric: tabular-nums;
 }
 .footer-time-sep { font-size: 12px; color: var(--muted-2); }
 
@@ -3120,9 +3137,13 @@ input, textarea { font-family: inherit; }
    1b). Hidden until it has text, clipped to one line with the full text as a
    native tooltip. */
 .metro-note {
-  /* No padding of its own: .footer-wave-region insets the right and the
-     export gutter the left, so the note already starts on the timeline's x. */
+  /* Starts where the controls it describes start.
+     It used to inherit its left edge from .footer-wave-region, which insets
+     the gutter the now-playing block filled. That block is in the composer now
+     and the gutter with it, so the note was left against the bare edge of the
+     footer, 18px to the left of Transport and lined up with nothing. */
   margin-top: 8px;
+  margin-left: 18px;
   font-size: 11px; line-height: 1.3; color: var(--muted);
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }