From 40c9d84697d899aaf21bec0fbdb59d6fa7ade60e Mon Sep 17 00:00:00 2001
From: Thales <>
Date: Sat, 26 Sep 2026 21:33:09 +0100
Subject: [PATCH] fix(ui): five 0.18.1 interface bugs from the issue tracker

- Now-playing card: the extracted date wraps to a second row instead of
  being cut off, the format chip reads just "MP3" / "WAV", and "Local"
  no longer shows twice when the format is unknown (#698).
- Library: the Unsorted row loses its drag grip, its New subfolder
  button and its hover highlight, and a folder dropped on it reorders
  rather than nesting inside (#695).
- Click track popover with no song loaded: the box stays solid and takes
  its own clicks; only the controls inside fade (#697).
- Count-in: a caption and tooltip say it plays with the click off, and
  it gets its own row in the popover (#696).
- Footer row: overflow-y hidden on the strip, two thresholds in
  footerFit so a sub-pixel or scrollbar wobble cannot flip the layout
  back and forth, and the footer times are written only when they
  change (#633).
---
 static/css/daw.css               |  86 ++++++++---
 static/index.html                |   7 +-
 static/js/catalog.js             |  62 +++++---
 static/js/footerFit.js           |  92 +++++++++--
 static/js/i18n.js                |  71 ++++-----
 static/js/transport.js           |  15 +-
 tests/e2e/footer-fit.spec.mjs    |  38 ++++-
 tests/e2e/unsorted-head.spec.mjs |  78 ++++++++++
 tests/js/footer-fit.test.mjs     | 257 +++++++++++++++++++++++++++++++
 9 files changed, 610 insertions(+), 96 deletions(-)
 create mode 100644 tests/e2e/unsorted-head.spec.mjs
 create mode 100644 tests/js/footer-fit.test.mjs

diff --git a/static/css/daw.css b/static/css/daw.css
index 89b8eb06..e256b5c6 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -924,7 +924,8 @@ input, textarea { font-family: inherit; }
   transition: background var(--t-fast), color var(--t-fast);
   user-select: none;
 }
-.folder-head:hover { background: var(--panel); color: var(--fg); }
+/* Unsorted (.system) has no controls to reveal, so hovering it does not light it up (#695). */
+.folder-head:not(.system):hover { background: var(--panel); color: var(--fg); }
 .folder-head .f-chevron { width: 11px; height: 11px; transition: transform 180ms ease; flex-shrink: 0; color: var(--muted); }
 .folder.collapsed .folder-head .f-chevron { transform: rotate(-90deg); }
 .folder-head .f-icon { width: 13px; height: 13px; flex-shrink: 0; color: var(--folder-color); }
@@ -2527,11 +2528,23 @@ input, textarea { font-family: inherit; }
 }
 /* The clusters, and only the clusters, scroll. Favourite and Export Mix sit
    outside this box so a window too narrow for the row cannot carry them off
-   the right-hand edge. */
+   the right-hand edge.
+
+   Sideways only. overflow-x: auto alone computes overflow-y to auto too, and
+   the strip is sized to its content, so a vertical scrollbar has nothing to
+   scroll. It can still appear: at a fractional device pixel ratio (250%
+   Windows scaling) content and box heights round differently, and a sub-pixel
+   of phantom overflow puts a classic scrollbar down the strip's right edge.
+   That takes its width out of the row, space-between at the "click" level
+   spreads the loss across every gap, and footerFit's observer re-measures.
+   That matches the breathing row of #633 exactly: every gap moving, Export
+   Mix not. hidden clips exactly what auto already clipped, and never takes
+   width from the row. */
 .footer-clusters {
   flex: 1; min-width: 0;
   display: flex; align-items: flex-start; flex-wrap: nowrap;
   overflow-x: auto;
+  overflow-y: hidden;
   gap: 16px;
 }
 /* Acts on the track, not on playback, so it is pinned opposite the clusters
@@ -3017,8 +3030,8 @@ input, textarea { font-family: inherit; }
    Nothing is removed and nothing changes behaviour -- the same panel, one
    click away, and back inline the moment the row has room for it again.
 
-   Fixed, not absolute: .footer-clusters is overflow-x: auto, which computes
-   overflow-y to auto as well, so an absolutely positioned panel would be
+   Fixed, not absolute: .footer-clusters scrolls sideways and clips
+   vertically (overflow-y: hidden), so an absolutely positioned panel would be
    clipped by the strip it belongs to. Fixed escapes that (no ancestor here
    creates a containing block), and transport.js sets left/top from the
    trigger's rect -- the same shape as .search-panel below. */
@@ -3029,8 +3042,8 @@ input, textarea { font-family: inherit; }
   gap: 9px;
   position: fixed;
   z-index: 300;
-  /* 260px takes the count-in and meter selects side by side on the first row,
-     so the popover is two short rows rather than one control per line. */
+  /* 260px keeps the popover to a few short rows: count-in with its hint, then
+     the meter selects side by side, rather than one control per line. */
   width: 260px;
   padding: 10px;
   background: var(--panel); border: 1px solid var(--border-strong);
@@ -3041,6 +3054,21 @@ input, textarea { font-family: inherit; }
 .footer-clusters.collapse-click .footer-metro-panel:not(.open) { display: none; }
 .footer-clusters.collapse-click .footer-metro-panel.hidden { display: none !important; }
 
+/* The count-in plays with the click off too (#696), so in the popover it sits
+   apart: its own row, a caption saying so, and a rule between it and the
+   click-only settings below. A full-width item is what breaks the row, so the
+   meter select moves down beside Grid. Popover only: inline it would be one
+   more flex item on a row footerFit is already measuring to the pixel. */
+.metro-countin-hint { display: none; }
+.footer-clusters.collapse-click .metro-countin-hint {
+  display: block;
+  flex-basis: 100%;
+  margin-top: -4px;
+  padding-bottom: 9px;
+  border-bottom: 1px solid var(--border);
+  font-size: 11px; line-height: 1.35; color: var(--muted);
+}
+
 /* The popover frees more width than the row was short -- the click cluster
    goes from about 450px to about 140px in one step, and there is no smaller
    step to take. Left-aligned, the surplus pools as a hole between the last
@@ -3099,8 +3127,8 @@ input, textarea { font-family: inherit; }
 .metro-vol-icon { flex-shrink: 0; }
 
 /* Fixed rather than absolute for the same reason the options popover is:
-   .footer-clusters is overflow-x: auto, which computes overflow-y to auto as
-   well, so an absolutely positioned panel would be clipped by the strip its
+   .footer-clusters scrolls sideways and clips vertically (overflow-y: hidden),
+   so an absolutely positioned panel would be clipped by the strip its
    button sits in. transport.js sets left/top from that button's rect. */
 .metro-vol-panel {
   position: fixed; z-index: 320;
@@ -4541,7 +4569,9 @@ input, textarea { font-family: inherit; }
   display: flex;
   flex-direction: column;
   justify-content: center;
-  gap: 6px;
+  /* 4px, not 6: with the meta line on two rows (#698) that is what keeps the
+     card inside the bar's height rather than growing it by 2px. */
+  gap: 4px;
   padding: 0 14px;
   background: var(--panel-2, var(--panel));
   border: 1px solid var(--border);
@@ -4630,18 +4660,24 @@ input, textarea { font-family: inherit; }
   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. */
+  /* Not indented under the title: the 51px that would cost is the difference
+     between the line fitting on one row and needing two.
+
+     It was kept to one row with nowrap and an ellipsis, but the ellipsis never
+     fired: every child is a flex item, so the last one, the extracted date,
+     was simply cut off at the card's edge (#698). It wraps instead, a whole
+     item at a time, so the date moves to a second row when the first is full.
+     The 40px cover already makes the card tall enough for two rows, with the
+     tighter gap on the card above. Never more than two: just above the
+     breakpoint that hides the card, a long language leaves it under 250px
+     wide, and a third row would make the whole bar taller. */
   margin: 0;
-  flex-wrap: nowrap;
+  flex-wrap: wrap;
+  row-gap: 0;
+  line-height: 1.35;
+  max-height: 2.7em;
   white-space: nowrap;
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 /* 7. The whole waveform strip in the bottom bar.
@@ -4757,6 +4793,20 @@ input, textarea { font-family: inherit; }
   opacity: 0.4;
   pointer-events: none;
 }
+/* Except when the panel is the popover (#697). There it has a box of its own,
+ * and fading that box with its contents left a 40% ghost of a panel floating
+ * over the lanes, their lines showing through it and no edge to tie it to the
+ * button, which read as a popover in the wrong place. It also let a click
+ * inside fall through to whatever was under it. So the box stays solid and
+ * takes its clicks, and only the controls in it go quiet. */
+.footer-clusters.collapse-click .footer-metro-panel.unavailable {
+  opacity: 1;
+  pointer-events: auto;
+}
+.footer-clusters.collapse-click .footer-metro-panel.unavailable > * {
+  opacity: 0.4;
+  pointer-events: none;
+}
 
 /* Vocals and its two mode buttons, as one thing.
  *
diff --git a/static/index.html b/static/index.html
index fbe7695c..44608e44 100644
--- a/static/index.html
+++ b/static/index.html
@@ -880,7 +880,7 @@
               </div>
               <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">
+                  <select id="t-metro-countin" class="metro-select" title="Bars of click before the song starts when you press play. Plays even with the click track off." 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>
                     <option value="1" data-i18n="click.countIn1">Count-in: 1 bar</option>
                     <option value="2" data-i18n="click.countIn2">Count-in: 2 bars</option>
@@ -888,6 +888,11 @@
                     <option value="4" data-i18n="click.countIn4">Count-in: 4 bars</option>
                   </select>
                 </span>
+                <!-- The count-in plays with the click off as well as on (#696),
+                     which reads as a fault in a popover titled for the click.
+                     Popover only (see .metro-countin-hint in daw.css): inline,
+                     the tooltip says it and the row has no room for a caption. -->
+                <span class="metro-countin-hint" data-i18n="click.countInHint">Plays even with the click track off</span>
                 <span class="metro-select-wrap">
                   <select id="t-metro-bar" class="metro-select" aria-label="Accent every N beats" data-i18n-aria-label="click.barAccentAria">
                     <option value="-1" selected data-i18n="click.auto">Auto (detected)</option>
diff --git a/static/js/catalog.js b/static/js/catalog.js
index 0df4d37d..93b7b53b 100644
--- a/static/js/catalog.js
+++ b/static/js/catalog.js
@@ -527,13 +527,14 @@ function deriveQuality(track) {
     // "local:<title>" with the extension removed, so "Lossless (WAV)" never
     // appeared for a real upload, and a title with a dot in it was misread
     // (#690).
-    const format = track.sourceFormat;
-    if (format === "wav") return i18nT("track.losslessWav");
-    if (format === "mp3") return i18nT("track.compressedMp3");
-    return i18nT("track.localFile");
+    // Just the format ("MP3", "FLAC"): the line is short and ends in the date,
+    // which a longer label pushed out of the card (#698). No format known, as
+    // for a track from before #690, returns "" and the chip is hidden: it used
+    // to fall back to "Local file", repeating the source chip beside it.
+    return trackFormat(track).toUpperCase();
   }
   if (sourceUrl.includes("youtube.com") || sourceUrl.includes("youtu.be")) return i18nT("track.qualityHigh");
-  if (sourceUrl.includes("soundcloud.com")) return i18nT("track.compressedMp3");
+  if (sourceUrl.includes("soundcloud.com")) return "MP3";
   return "—";
 }
 
@@ -612,7 +613,14 @@ function applyTrackInfoToPanel(track) {
   if (metaDuration) metaDuration.textContent = track.duration ? fmtTime(track.duration) : "—";
   if (trackExtracted) trackExtracted.textContent = fmtExtracted(track.createdAt);
   if (trackSource) trackSource.textContent = deriveSource(track.sourceUrl);
-  if (trackQuality) trackQuality.textContent = deriveQuality(track);
+  if (trackQuality) {
+    const quality = deriveQuality(track);
+    trackQuality.textContent = quality;
+    // Hidden with the separator in front of it, so there is no empty "· ·".
+    trackQuality.hidden = !quality;
+    const sep = trackQuality.previousElementSibling;
+    if (sep?.classList.contains("daw-track-sep")) sep.hidden = !quality;
+  }
   // The now-playing square shows the same format icon the library row does.
   paintNowPlayingArt(trackFormat(track));
   if (favBtn) {
@@ -1435,6 +1443,10 @@ function renderTrackItem(trackId, { inTrash = false } = {}) {
 function renderFolder(folder) {
   const isTrash = folder.id === TRASH_ID;
   const isUnsorted = folder.id === UNSORTED_ID;
+  // Unsorted is the system folder every new import lands in: it has no grip,
+  // no New subfolder and no delete, so its row has nothing to reveal on hover
+  // (#695). The Stem Collections header already has New Folder.
+  const isSystem = isTrash || isUnsorted;
   const isSubfolder = Boolean(folder.parentId);
   if (!isTrash) folder.color = normalizeFolderColor(folder.color);
 
@@ -1443,7 +1455,7 @@ function renderFolder(folder) {
   el.dataset.id = folder.id;
 
   const head = document.createElement("div");
-  head.className = "folder-head";
+  head.className = isUnsorted ? "folder-head system" : "folder-head";
   if (!isTrash) head.style.setProperty("--folder-color", folder.color);
 
   const folderIcon = isTrash
@@ -1451,7 +1463,7 @@ function renderFolder(folder) {
     : `<svg class="f-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>`;
 
   head.innerHTML = `
-    ${isTrash ? "" : `<span class="f-grip" title="${esc(i18nT("folder.dragToReorder"))}">
+    ${isSystem ? "" : `<span class="f-grip" title="${esc(i18nT("folder.dragToReorder"))}">
       <svg viewBox="0 0 24 24" width="10" height="10" fill="currentColor" aria-hidden="true">
         <circle cx="9" cy="5" r="1.5"/><circle cx="15" cy="5" r="1.5"/>
         <circle cx="9" cy="12" r="1.5"/><circle cx="15" cy="12" r="1.5"/>
@@ -1462,16 +1474,16 @@ function renderFolder(folder) {
     ${folderIcon}
     <span class="f-name">${esc(folder.name)}</span>
     <span class="f-count">${folder.items.length}</span>
-    ${isTrash ? "" : `
+    ${isSystem ? "" : `
       <button class="f-subfolder" type="button" aria-label="${esc(i18nT("folder.newSubfolder"))}" title="${esc(i18nT("folder.newSubfolder"))}">
         <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
           <path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
           <path d="M12 11v6M9 14h6"/>
         </svg>
       </button>
-      ${isUnsorted ? "" : `<button class="f-del" type="button" aria-label="${esc(i18nT("folder.deleteFolder"))}" title="${esc(i18nT("folder.deleteFolder"))}">
+      <button class="f-del" type="button" aria-label="${esc(i18nT("folder.deleteFolder"))}" title="${esc(i18nT("folder.deleteFolder"))}">
         <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg>
-      </button>`}
+      </button>
     `}
   `;
 
@@ -1565,11 +1577,10 @@ function renderFolder(folder) {
       if (isFolderDescendant(folderDragId, folder.id)) return; // prevent cycle
       e.preventDefault();
       e.dataTransfer.dropEffect = "move";
-      const rect = head.getBoundingClientRect();
-      const rel = (e.clientY - rect.top) / rect.height;
-      el.classList.toggle("drop-before", rel < 0.25);
-      el.classList.toggle("drop-into", rel >= 0.25 && rel < 0.75);
-      el.classList.toggle("drop-after", rel >= 0.75);
+      const zone = folderDropZone(e, head, isUnsorted);
+      el.classList.toggle("drop-before", zone === "before");
+      el.classList.toggle("drop-into", zone === "into");
+      el.classList.toggle("drop-after", zone === "after");
       return;
     }
     if (!isTrackDragEvent(e)) return;
@@ -1585,11 +1596,10 @@ function renderFolder(folder) {
   el.addEventListener("drop", (e) => {
     e.preventDefault();
     if (folderDragId && folderDragId !== folder.id && !isTrash) {
-      const rect = head.getBoundingClientRect();
-      const rel = (e.clientY - rect.top) / rect.height;
+      const zone = folderDropZone(e, head, isUnsorted);
       el.classList.remove("drop-before", "drop-after", "drop-into");
-      if (rel < 0.25) reorderFolder(folderDragId, folder.id, true);
-      else if (rel >= 0.75) reorderFolder(folderDragId, folder.id, false);
+      if (zone === "before") reorderFolder(folderDragId, folder.id, true);
+      else if (zone === "after") reorderFolder(folderDragId, folder.id, false);
       else reparentFolder(folderDragId, folder.id);
       return;
     }
@@ -1600,6 +1610,18 @@ function renderFolder(folder) {
   return el;
 }
 
+// Where a dragged folder lands relative to a folder row: the top quarter
+// reorders before it, the bottom quarter after it, the middle nests inside.
+// Unsorted takes no subfolders, so it splits into before/after only.
+function folderDropZone(e, head, noNesting) {
+  const rect = head.getBoundingClientRect();
+  const rel = (e.clientY - rect.top) / rect.height;
+  if (noNesting) return rel < 0.5 ? "before" : "after";
+  if (rel < 0.25) return "before";
+  if (rel >= 0.75) return "after";
+  return "into";
+}
+
 function renderStrip(strip, nonTrash) {
   if (!strip) return;
   const folderTrackIds = new Set(folders.flatMap((folder) => folder.items));
diff --git a/static/js/footerFit.js b/static/js/footerFit.js
index f4a0ccc7..cf50196e 100644
--- a/static/js/footerFit.js
+++ b/static/js/footerFit.js
@@ -18,7 +18,8 @@
 //
 // The order below is cheapest first. Each level is re-measured from the
 // uncollapsed state rather than added on top of the last one, so the strip can
-// open back up as room returns and there is no hysteresis to tune.
+// open back up as room returns. Opening back up takes REOPEN_SLACK to spare,
+// though, not just a fit; see there for why (#633).
 
 // Least destructive first, and each step costs more than the last.
 //
@@ -46,9 +47,25 @@ const MIN_WRAP_PX = 240;
 // Rounding headroom on the width asked for; see wrapWidthFor.
 const WRAP_SLACK = 4;
 
+// Room a less collapsed level must have to spare before the strip goes back to
+// it. Collapsing still happens the moment the row is short by any amount.
+//
+// Without this the decision has one threshold, and a strip sitting exactly on
+// it flips on any disturbance smaller than a pixel: a fractional width at a 2.5
+// device pixel ratio rounding the other way, or a scrollbar arriving and
+// leaving. Each flip changes the strip's size, the observer fires, and it
+// flips back, which is the footer "breathing" in #633. With two thresholds
+// REOPEN_SLACK apart, whatever just collapsed a level has to give back more
+// than this before it undoes it, so a wobble smaller than that settles on the
+// first pass instead of cycling. 24px is wider than a classic Windows
+// scrollbar at any scale (17px), the largest width change anything in the
+// footer can make on its own.
+const REOPEN_SLACK = 24;
+
 let strip = null;
 let level = 0; // count of LEVELS applied, in order; 0 is fully inline
 let queued = false;
+let observedWidth = -1; // strip content width the observer last reported
 
 /**
  * Panel width that gives the row back `deficit` pixels, or 0 if wrapping
@@ -77,15 +94,44 @@ function wrapWidthFor(deficit) {
   // popover is the better answer for that window.
   //
   // WRAP_SLACK is not a fudge for a wrong sum. Widths here are fractional and
-  // scrollWidth is a rounded integer, so asking for exactly the deficit back
-  // can land a pixel short -- and a pixel short is not "nearly": it drops the
-  // whole cluster to the popover, which is the difference between the options
-  // being on screen and being behind a click.
+  // the panel is given a whole number of pixels, so asking for exactly the
+  // deficit back can land a pixel short -- and a pixel short is not "nearly":
+  // it drops the whole cluster to the popover, which is the difference between
+  // the options being on screen and being behind a click.
   const want = Math.floor(inline - deficit) - WRAP_SLACK;
   const width = Math.max(want, Math.ceil(inline / 2));
   return width >= MIN_WRAP_PX && width < inline ? width : 0;
 }
 
+/**
+ * How far the row runs past the strip's right edge: positive when it
+ * overflows, negative by the room it has to spare.
+ *
+ * Not scrollWidth - clientWidth. That never goes below zero, so it cannot say
+ * how much room there is, which is what REOPEN_SLACK needs to know. And both
+ * are integers rounded from fractional widths, so at a 2.5 device pixel ratio
+ * the same row could read as fitting on one pass and a pixel over on the next.
+ * Rect edges are fractional and the same on every pass.
+ *
+ * Only meaningful with the clusters packed to the left: apply() holds them
+ * there while it measures.
+ */
+function overrun() {
+  const box = strip.getBoundingClientRect();
+  let left = Infinity;
+  let right = -Infinity;
+  for (const el of strip.children) {
+    const r = el.getBoundingClientRect();
+    if (!r.width) continue;
+    left = Math.min(left, r.left);
+    right = Math.max(right, r.right);
+  }
+  // Edge to edge of the clusters rather than against the strip's own edges,
+  // so a strip that has been scrolled sideways measures the same as one that
+  // has not.
+  return right > left ? right - left - box.width : -box.width;
+}
+
 function apply() {
   queued = false;
   if (!strip || !strip.isConnected) return;
@@ -102,17 +148,28 @@ function apply() {
   // collapse every level for nothing.
   if (!strip.clientWidth) return;
 
-  let deficit = strip.scrollWidth - strip.clientWidth;
+  // The "click" level spreads the clusters with space-between, and a spread
+  // row always spans the strip exactly: it would never show room to spare.
+  // Held left-packed for the measurement only, and let go below.
+  strip.style.justifyContent = "flex-start";
+
+  // Positive means level n does not fit. A level less collapsed than the one
+  // in force also has to leave REOPEN_SLACK spare (#633).
+  const slack = (n) => (n < was ? REOPEN_SLACK : 0);
+  const natural = overrun();
+  let deficit = natural + slack(0);
 
   // Wrap: measured against the uncollapsed row, which is the only state where
-  // the panel's inline width can be read.
+  // the panel's inline width can be read. Asks for the slack this level needs,
+  // and for at least a pixel: when the row fits outright but not with the
+  // slack to reopen, wrapping is where it stays.
   if (deficit > 0) {
-    const w = wrapWidthFor(deficit);
+    const w = wrapWidthFor(Math.max(1, natural + slack(1)));
     if (w) {
       strip.style.setProperty("--metro-wrap-w", `${w}px`);
       strip.classList.add("collapse-wrap");
       level = 1;
-      deficit = strip.scrollWidth - strip.clientWidth;
+      deficit = overrun() + slack(1);
     }
   }
 
@@ -123,7 +180,7 @@ function apply() {
     strip.style.removeProperty("--metro-wrap-w");
     strip.classList.add("collapse-click");
     level = 2;
-    deficit = strip.scrollWidth - strip.clientWidth;
+    deficit = overrun() + slack(2);
   }
 
   if (deficit > 0) {
@@ -131,6 +188,8 @@ function apply() {
     level = 3;
   }
 
+  strip.style.removeProperty("justify-content");
+
   // "click" is not only a layout change: it is what turns the click-track
   // options into a popover, and a popover left open across the change would be
   // stranded at coordinates that no longer describe its trigger. Announced
@@ -161,8 +220,19 @@ export function initFooterFit() {
   // Watches the strip itself, not the window, so a sidebar collapse or any
   // other layout change that moves the boundary is picked up without anything
   // having to remember to tell us.
+  //
+  // Width changes only. The strip's height is an output of the fit, not an
+  // input: wrapping makes it taller, and a horizontal scrollbar coming or
+  // going changes it too. Re-fitting on those is a loop from the fit back into
+  // itself with nothing new to measure (#633). Content changes that do matter
+  // call refitFooter() themselves, and still go straight through.
   if (typeof ResizeObserver === "function") {
-    new ResizeObserver(refitFooter).observe(strip);
+    new ResizeObserver((entries) => {
+      const width = entries[entries.length - 1].contentRect.width;
+      if (width === observedWidth) return;
+      observedWidth = width;
+      refitFooter();
+    }).observe(strip);
   } else {
     window.addEventListener("resize", refitFooter);
   }
diff --git a/static/js/i18n.js b/static/js/i18n.js
index 9c56eb51..59281217 100644
--- a/static/js/i18n.js
+++ b/static/js/i18n.js
@@ -437,12 +437,13 @@ const en = {
   "click.unavailableAria": "Click track unavailable",
   "click.optionsAria": "Click track options",
   "click.countIn": "Count-in",
-  "click.countInTitle": "Bars of click before the song starts when you press play",
+  "click.countInTitle": "Bars of click before the song starts when you press play. Plays even with the click track off.",
   "click.countInOff": "Count-in: off",
   "click.countIn1": "Count-in: 1 bar",
   "click.countIn2": "Count-in: 2 bars",
   "click.countIn3": "Count-in: 3 bars",
   "click.countIn4": "Count-in: 4 bars",
+  "click.countInHint": "Plays even with the click track off",
   "click.barCustom": "Custom...",
   "click.barCustomTitle": "Beats per bar",
   "click.groupTitle": "How the bar divides, e.g. 3+2+2. Blank uses the usual grouping for the meter.",
@@ -612,10 +613,8 @@ const en = {
   "queue.starting": "Starting…",
   "release.viewDownload": "View download",
 
-  "track.localFile": "Local file",
+  "track.localFile": "Local",
   "track.web": "Web",
-  "track.losslessWav": "Lossless (WAV)",
-  "track.compressedMp3": "Compressed (MP3)",
   "track.qualityHigh": "High",
   "track.untitled": "Untitled track",
   "track.unknown": "Unknown track",
@@ -1053,12 +1052,13 @@ const pl = {
   "click.unavailableAria": "Metronom niedostępny",
   "click.optionsAria": "Opcje metronomu",
   "click.countIn": "Odliczanie",
-  "click.countInTitle": "Takty metronomu przed rozpoczęciem utworu po naciśnięciu odtwarzania",
+  "click.countInTitle": "Takty metronomu przed rozpoczęciem utworu po naciśnięciu odtwarzania. Działa także przy wyłączonym metronomie.",
   "click.countInOff": "Odliczanie: wył.",
   "click.countIn1": "Odliczanie: 1 takt",
   "click.countIn2": "Odliczanie: 2 takty",
   "click.countIn3": "Odliczanie: 3 takty",
   "click.countIn4": "Odliczanie: 4 takty",
+  "click.countInHint": "Działa także przy wyłączonym metronomie",
   "click.barCustom": "Własne...",
   "click.barCustomTitle": "Uderzenia na takt",
   "click.groupTitle": "Jak dzieli się takt, np. 3+2+2. Puste pole używa typowego podziału dla metrum.",
@@ -1232,10 +1232,8 @@ const pl = {
   "queue.starting": "Uruchamianie…",
   "release.viewDownload": "Przejdź do pobrania",
 
-  "track.localFile": "Plik lokalny",
+  "track.localFile": "Lokalny",
   "track.web": "Internet",
-  "track.losslessWav": "Bezstratny (WAV)",
-  "track.compressedMp3": "Skompresowany (MP3)",
   "track.qualityHigh": "Wysoka",
   "track.untitled": "Utwór bez tytułu",
   "track.unknown": "Nieznany utwór",
@@ -1660,12 +1658,13 @@ const ja = {
   "click.unavailableAria": "クリックトラック利用不可",
   "click.optionsAria": "クリックトラックオプション",
   "click.countIn": "カウントイン",
-  "click.countInTitle": "再生を押すと曲が始まる前に鳴らすクリックの小節数",
+  "click.countInTitle": "再生を押すと曲が始まる前に鳴らすクリックの小節数。クリックトラックがオフでも鳴ります。",
   "click.countInOff": "カウントイン: オフ",
   "click.countIn1": "カウントイン: 1小節",
   "click.countIn2": "カウントイン: 2小節",
   "click.countIn3": "カウントイン: 3小節",
   "click.countIn4": "カウントイン: 4小節",
+  "click.countInHint": "クリックトラックがオフでも鳴ります",
   "click.barCustom": "カスタム...",
   "click.barCustomTitle": "1小節の拍数",
   "click.groupTitle": "小節の区切り方 (例: 3+2+2)。空欄ならその拍子の一般的な区切りを使います。",
@@ -1831,10 +1830,8 @@ const ja = {
   "queue.starting": "開始中…",
   "release.viewDownload": "ダウンロードを見る",
 
-  "track.localFile": "ローカルファイル",
+  "track.localFile": "ローカル",
   "track.web": "Web",
-  "track.losslessWav": "ロスレス (WAV)",
-  "track.compressedMp3": "圧縮 (MP3)",
   "track.qualityHigh": "高品質",
   "track.untitled": "無題のトラック",
   "track.unknown": "不明なトラック",
@@ -2243,12 +2240,13 @@ const zhHans = {
   "click.unavailableAria": "节拍器不可用",
   "click.optionsAria": "节拍器选项",
   "click.countIn": "预备拍",
-  "click.countInTitle": "按下播放后,在歌曲开始前的节拍小节数",
+  "click.countInTitle": "按下播放后,在歌曲开始前的节拍小节数。节拍器关闭时也会播放。",
   "click.countInOff": "预备拍: 关",
   "click.countIn1": "预备拍: 1 小节",
   "click.countIn2": "预备拍: 2 小节",
   "click.countIn3": "预备拍: 3 小节",
   "click.countIn4": "预备拍: 4 小节",
+  "click.countInHint": "节拍器关闭时也会播放",
   "click.barCustom": "自定义...",
   "click.barCustomTitle": "每小节拍数",
   "click.groupTitle": "小节如何划分,例如 3+2+2。留空则使用该拍号的常用分组。",
@@ -2414,10 +2412,8 @@ const zhHans = {
   "queue.starting": "正在启动…",
   "release.viewDownload": "查看下载",
 
-  "track.localFile": "本地文件",
+  "track.localFile": "本地",
   "track.web": "网络",
-  "track.losslessWav": "无损 (WAV)",
-  "track.compressedMp3": "压缩 (MP3)",
   "track.qualityHigh": "高",
   "track.untitled": "未命名曲目",
   "track.unknown": "未知曲目",
@@ -2827,12 +2823,13 @@ const de = {
   "click.unavailableAria": "Click-Track nicht verfügbar",
   "click.optionsAria": "Click-Track-Optionen",
   "click.countIn": "Vorzähler",
-  "click.countInTitle": "Takte Click, bevor der Song bei Wiedergabe beginnt",
+  "click.countInTitle": "Takte Click, bevor der Song bei Wiedergabe beginnt. Klingt auch bei ausgeschaltetem Click-Track.",
   "click.countInOff": "Vorzähler: aus",
   "click.countIn1": "Vorzähler: 1 Takt",
   "click.countIn2": "Vorzähler: 2 Takte",
   "click.countIn3": "Vorzähler: 3 Takte",
   "click.countIn4": "Vorzähler: 4 Takte",
+  "click.countInHint": "Klingt auch bei ausgeschaltetem Click-Track",
   "click.barCustom": "Eigene...",
   "click.barCustomTitle": "Schläge pro Takt",
   "click.groupTitle": "Wie sich der Takt teilt, z. B. 3+2+2. Leer nutzt die übliche Gruppierung des Taktes.",
@@ -3002,10 +2999,8 @@ const de = {
   "queue.starting": "Wird gestartet…",
   "release.viewDownload": "Download ansehen",
 
-  "track.localFile": "Lokale Datei",
+  "track.localFile": "Lokal",
   "track.web": "Web",
-  "track.losslessWav": "Verlustfrei (WAV)",
-  "track.compressedMp3": "Komprimiert (MP3)",
   "track.qualityHigh": "Hoch",
   "track.untitled": "Unbenannter Track",
   "track.unknown": "Unbekannter Track",
@@ -3421,12 +3416,13 @@ const pt = {
   "click.unavailableAria": "Clique de referência indisponível",
   "click.optionsAria": "Opções do clique de referência",
   "click.countIn": "Contagem",
-  "click.countInTitle": "Compassos de clique antes de a música começar ao pressionar reproduzir",
+  "click.countInTitle": "Compassos de clique antes de a música começar ao pressionar reproduzir. Toca mesmo com o clique de referência desligado.",
   "click.countInOff": "Contagem: desligada",
   "click.countIn1": "Contagem: 1 compasso",
   "click.countIn2": "Contagem: 2 compassos",
   "click.countIn3": "Contagem: 3 compassos",
   "click.countIn4": "Contagem: 4 compassos",
+  "click.countInHint": "Toca mesmo com o clique de referência desligado",
   "click.barCustom": "Personalizado...",
   "click.barCustomTitle": "Batidas por compasso",
   "click.groupTitle": "Como o compasso se divide, ex. 3+2+2. Em branco usa o agrupamento usual do compasso.",
@@ -3596,10 +3592,8 @@ const pt = {
   "queue.starting": "Iniciando…",
   "release.viewDownload": "Ver download",
 
-  "track.localFile": "Arquivo local",
+  "track.localFile": "Local",
   "track.web": "Web",
-  "track.losslessWav": "Sem perdas (WAV)",
-  "track.compressedMp3": "Compactado (MP3)",
   "track.qualityHigh": "Alta",
   "track.untitled": "Faixa sem título",
   "track.unknown": "Faixa desconhecida",
@@ -4016,12 +4010,13 @@ const id = {
   "click.unavailableAria": "Click track tidak tersedia",
   "click.optionsAria": "Opsi click track",
   "click.countIn": "Hitungan awal",
-  "click.countInTitle": "Birama klik sebelum lagu dimulai saat menekan putar",
+  "click.countInTitle": "Birama klik sebelum lagu dimulai saat menekan putar. Tetap berbunyi meski click track mati.",
   "click.countInOff": "Hitungan awal: mati",
   "click.countIn1": "Hitungan awal: 1 birama",
   "click.countIn2": "Hitungan awal: 2 birama",
   "click.countIn3": "Hitungan awal: 3 birama",
   "click.countIn4": "Hitungan awal: 4 birama",
+  "click.countInHint": "Tetap berbunyi meski click track mati",
   "click.barCustom": "Khusus...",
   "click.barCustomTitle": "Ketukan per birama",
   "click.groupTitle": "Cara birama dibagi, mis. 3+2+2. Kosong memakai pengelompokan biasa untuk birama itu.",
@@ -4187,10 +4182,8 @@ const id = {
   "queue.starting": "Memulai…",
   "release.viewDownload": "Lihat unduhan",
 
-  "track.localFile": "File lokal",
+  "track.localFile": "Lokal",
   "track.web": "Web",
-  "track.losslessWav": "Lossless (WAV)",
-  "track.compressedMp3": "Terkompresi (MP3)",
   "track.qualityHigh": "Tinggi",
   "track.untitled": "Trek tanpa judul",
   "track.unknown": "Trek tidak dikenal",
@@ -4600,12 +4593,13 @@ const fr = {
   "click.unavailableAria": "Métronome indisponible",
   "click.optionsAria": "Options du métronome",
   "click.countIn": "Décompte",
-  "click.countInTitle": "Mesures de décompte avant le début du morceau lors de la lecture",
+  "click.countInTitle": "Mesures de décompte avant le début du morceau lors de la lecture. Fonctionne même avec le métronome désactivé.",
   "click.countInOff": "Décompte : désactivé",
   "click.countIn1": "Décompte : 1 mesure",
   "click.countIn2": "Décompte : 2 mesures",
   "click.countIn3": "Décompte : 3 mesures",
   "click.countIn4": "Décompte : 4 mesures",
+  "click.countInHint": "Fonctionne même avec le métronome désactivé",
   "click.barCustom": "Personnalisé...",
   "click.barCustomTitle": "Temps par mesure",
   "click.groupTitle": "Comment la mesure se divise, ex. 3+2+2. Vide utilise le groupement habituel de la mesure.",
@@ -4775,10 +4769,8 @@ const fr = {
   "queue.start": "Démarrer",
   "queue.starting": "Démarrage…",
 
-  "track.localFile": "Fichier local",
+  "track.localFile": "Local",
   "track.web": "Web",
-  "track.losslessWav": "Sans perte (WAV)",
-  "track.compressedMp3": "Compressé (MP3)",
   "track.qualityHigh": "Haute",
   "track.untitled": "Morceau sans titre",
   "track.unknown": "Morceau inconnu",
@@ -5039,7 +5031,6 @@ const ptPT = {
   "topbar.removeFile": "Remover ficheiro",
   "topbar.uploadFile": "Carregar ficheiro de áudio",
   "library.importedFile": "Ficheiro importado",
-  "track.localFile": "Ficheiro local",
   "settings.cookies.invalid": "Ficheiro não encontrado ou ilegível.",
   "upload.unsupportedFormat": "Apenas ficheiros MP3, WAV, FLAC, MP4, M4A, OGG e Opus são compatíveis.",
   "upload.fileTooLarge": "O ficheiro é demasiado grande ({size}). O máximo é {max}.",
@@ -5313,12 +5304,13 @@ const es = {
   "click.unavailableAria": "Click no disponible",
   "click.optionsAria": "Opciones del click",
   "click.countIn": "Cuenta de entrada",
-  "click.countInTitle": "Compases de click antes de que empiece la canción al pulsar reproducir",
+  "click.countInTitle": "Compases de click antes de que empiece la canción al pulsar reproducir. Suena aunque el click esté apagado.",
   "click.countInOff": "Cuenta de entrada: desactivada",
   "click.countIn1": "Cuenta de entrada: 1 compás",
   "click.countIn2": "Cuenta de entrada: 2 compases",
   "click.countIn3": "Cuenta de entrada: 3 compases",
   "click.countIn4": "Cuenta de entrada: 4 compases",
+  "click.countInHint": "Suena aunque el click esté apagado",
   "click.barCustom": "Personalizado...",
   "click.barCustomTitle": "Tiempos por compás",
   "click.groupTitle": "Cómo se divide el compás, p. ej. 3+2+2. En blanco usa la agrupación habitual del compás.",
@@ -5489,10 +5481,8 @@ const es = {
   "queue.starting": "Iniciando…",
   "release.viewDownload": "Ver la descarga",
 
-  "track.localFile": "Archivo local",
+  "track.localFile": "Local",
   "track.web": "Web",
-  "track.losslessWav": "Sin pérdida (WAV)",
-  "track.compressedMp3": "Comprimido (MP3)",
   "track.qualityHigh": "Alta",
   "track.untitled": "Pista sin título",
   "track.unknown": "Pista desconocida",
@@ -5929,12 +5919,13 @@ const ko = {
   "click.unavailableAria": "클릭 트랙을 쓸 수 없음",
   "click.optionsAria": "클릭 트랙 옵션",
   "click.countIn": "카운트인",
-  "click.countInTitle": "재생을 누르면 곡이 시작하기 전에 울릴 클릭 마디 수",
+  "click.countInTitle": "재생을 누르면 곡이 시작하기 전에 울릴 클릭 마디 수. 클릭 트랙이 꺼져 있어도 재생됩니다.",
   "click.countInOff": "카운트인: 끄기",
   "click.countIn1": "카운트인: 1마디",
   "click.countIn2": "카운트인: 2마디",
   "click.countIn3": "카운트인: 3마디",
   "click.countIn4": "카운트인: 4마디",
+  "click.countInHint": "클릭 트랙이 꺼져 있어도 재생됩니다",
   "click.barCustom": "사용자 지정...",
   "click.barCustomTitle": "마디당 박자",
   "click.groupTitle": "마디를 나누는 방식 (예: 3+2+2). 비워 두면 해당 박자의 일반적인 묶음을 사용합니다.",
@@ -6100,10 +6091,8 @@ const ko = {
   "queue.starting": "시작하는 중…",
   "release.viewDownload": "다운로드 보기",
 
-  "track.localFile": "로컬 파일",
+  "track.localFile": "로컬",
   "track.web": "웹",
-  "track.losslessWav": "무손실 (WAV)",
-  "track.compressedMp3": "압축 (MP3)",
   "track.qualityHigh": "높음",
   "track.untitled": "제목 없는 트랙",
   "track.unknown": "알 수 없는 트랙",
diff --git a/static/js/transport.js b/static/js/transport.js
index 07e76dcb..2edc31a2 100644
--- a/static/js/transport.js
+++ b/static/js/transport.js
@@ -191,10 +191,17 @@ export function updatePlayheadMarker(currentSec) {
 // drive the small scrub bar in the now-playing card. Driven from the
 // same wavesurfer "timeupdate" event that already updates #t-time, so
 // every label stays in sync without extra event plumbing.
+//
+// Written only when the text actually changes. This runs every frame while
+// playing, and assigning textContent replaces the text node even when the
+// string is the same, which re-lays out the whole footer control strip sixty
+// times a second to show a number that moves once a second (#633).
 export function updateFooterTimes(currentSec) {
   if (!totalDuration) return;
-  if (footerTimeElapsed) footerTimeElapsed.textContent = fmtTime(currentSec);
-  if (footerTimeTotal) footerTimeTotal.textContent = fmtTime(totalDuration);
+  const elapsed = fmtTime(currentSec);
+  const total = fmtTime(totalDuration);
+  if (footerTimeElapsed && footerTimeElapsed.textContent !== elapsed) footerTimeElapsed.textContent = elapsed;
+  if (footerTimeTotal && footerTimeTotal.textContent !== total) footerTimeTotal.textContent = total;
   const pct = Math.max(0, Math.min(100, (currentSec / totalDuration) * 100));
   if (npScrubFill) npScrubFill.style.width = `${pct}%`;
   footerWaveDrawFn?.(pct / 100);
@@ -1435,8 +1442,8 @@ export function updateMetronomeAvailability(grid, reason = "") {
 // which only exists once footerFit decides the options do not fit inline, and
 // the volume fader, which is there at every width.
 //
-// Both are position:fixed. .footer-clusters is overflow-x: auto, which computes
-// overflow-y to auto as well, so an absolutely positioned panel would be
+// Both are position:fixed. .footer-clusters scrolls sideways and clips
+// vertically (overflow-y: hidden), so an absolutely positioned panel would be
 // clipped by the strip it belongs to. Fixed escapes that, at the price of
 // placing them from the trigger's rect by hand.
 
diff --git a/tests/e2e/footer-fit.spec.mjs b/tests/e2e/footer-fit.spec.mjs
index 1d24880d..2e064f4a 100644
--- a/tests/e2e/footer-fit.spec.mjs
+++ b/tests/e2e/footer-fit.spec.mjs
@@ -10,7 +10,7 @@
 //
 // These run at the config's 1280x720 unless a test sets its own viewport.
 import { test, expect } from "@playwright/test";
-import { openStudio, waitForClickTrack } from "./helpers.mjs";
+import { openStudio, seedLibrary, stubUpdateCheck, waitForClickTrack } from "./helpers.mjs";
 
 const stripFits = (page) =>
   page.evaluate(() => {
@@ -105,6 +105,42 @@ test.describe("footer fit", () => {
     await expect(more).toHaveAttribute("aria-expanded", "false");
   });
 
+  test("the options popover is a solid panel above its button with no track loaded", async ({ page }) => {
+    // #697. With nothing loaded the options are .unavailable, which faded the
+    // whole panel to 40% and made it click-through. Inline that is right. As
+    // the popover it faded the box too, leaving a see-through ghost over the
+    // lanes that read as misplaced, and a click inside it hit the lane below.
+    await page.setViewportSize({ width: 1280, height: 800 });
+    await seedLibrary(page);
+    await stubUpdateCheck(page);
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await expect.poll(() => collapseLevels(page), { timeout: 5000 }).toContain("collapse-click");
+
+    const more = page.locator("#t-metro-more");
+    await more.click();
+    const panel = page.locator("#t-metro-panel");
+    await expect(panel).toHaveClass(/\bunavailable\b/);
+    await expect(panel).toBeVisible();
+
+    const geo = await page.evaluate(() => {
+      const p = document.querySelector("#t-metro-panel");
+      const pr = p.getBoundingClientRect();
+      const br = document.querySelector("#t-metro-more").getBoundingClientRect();
+      const hit = document.elementFromPoint(pr.left + 4, pr.top + 4);
+      return {
+        opacity: getComputedStyle(p).opacity,
+        above: pr.bottom <= br.top,
+        overlapsX: pr.left < br.right && pr.right > br.left,
+        hitsPanel: p.contains(hit),
+      };
+    });
+    expect(geo).toEqual({ opacity: "1", above: true, overlapsX: true, hitsPanel: true });
+
+    // A click on the panel itself is not a click away from it.
+    await panel.click({ position: { x: 4, y: 4 } });
+    await expect(more).toHaveAttribute("aria-expanded", "true");
+  });
+
   test("the strip opens back up when the room comes back", async ({ page }) => {
     // The fit re-measures from the uncollapsed state every time, so this is the
     // direction that catches a one-way ratchet.
diff --git a/tests/e2e/unsorted-head.spec.mjs b/tests/e2e/unsorted-head.spec.mjs
new file mode 100644
index 00000000..9a3f4ad7
--- /dev/null
+++ b/tests/e2e/unsorted-head.spec.mjs
@@ -0,0 +1,78 @@
+// The Unsorted row in Stem Collections is a system folder: every new import
+// lands in it, it cannot be deleted, and it has nothing to reorder. It used to
+// carry a drag grip ("Drag to reorder") and its own New subfolder button, both
+// revealed by a hover highlight, while the Stem Collections header right above
+// already has New Folder (#695).
+//
+// A folder the user made keeps all of that: its grip still reorders and nests,
+// and its New subfolder still works.
+import { test, expect } from "@playwright/test";
+import {
+  JOB_ID,
+  SIBLING_JOB_ID,
+  TRACK_TITLE,
+  SIBLING_TITLE,
+  fixtureTrack,
+  seedCatalogState,
+  stubExportEndpoints,
+  stubUpdateCheck,
+} from "./helpers.mjs";
+
+const UNSORTED = '.folder[data-id="f-unsorted"] > .folder-head';
+const MINE = '.folder[data-id="f-mine"] > .folder-head';
+
+async function open(page) {
+  // Zero the motion tokens so a hover background is read after, not during,
+  // its transition.
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await seedCatalogState(page, {
+    folders: [
+      { id: "f-unsorted", name: "Unsorted", items: [JOB_ID], color: null },
+      { id: "f-mine", name: "Mine", items: [SIBLING_JOB_ID], color: null },
+      { id: "trash", name: "Trash", items: [], color: null },
+    ],
+    tracks: {
+      [JOB_ID]: fixtureTrack(JOB_ID, TRACK_TITLE),
+      [SIBLING_JOB_ID]: fixtureTrack(SIBLING_JOB_ID, SIBLING_TITLE),
+    },
+  });
+  await stubExportEndpoints(page);
+  await stubUpdateCheck(page);
+  await page.goto("/", { waitUntil: "domcontentloaded" });
+  await page.locator(UNSORTED).waitFor({ timeout: 20000 });
+}
+
+const background = (page, sel) =>
+  page.locator(sel).evaluate((el) => getComputedStyle(el).backgroundColor);
+
+test.describe("Unsorted folder row", () => {
+  test("has no grip, no New subfolder and no delete", async ({ page }) => {
+    await open(page);
+    const head = page.locator(UNSORTED);
+    await head.hover();
+    await expect(head.locator(".f-grip")).toHaveCount(0);
+    await expect(head.locator(".f-subfolder")).toHaveCount(0);
+    await expect(head.locator(".f-del")).toHaveCount(0);
+    // The one New Folder button is on the section header.
+    await expect(page.locator("#newFolderBtn")).toHaveCount(1);
+  });
+
+  test("does not light up on hover", async ({ page }) => {
+    await open(page);
+    const before = await background(page, UNSORTED);
+    await page.locator(UNSORTED).hover();
+    expect(await background(page, UNSORTED)).toBe(before);
+  });
+
+  test("a user folder keeps its grip, New subfolder, delete and hover", async ({ page }) => {
+    await open(page);
+    const head = page.locator(MINE);
+    const before = await background(page, MINE);
+    await head.hover();
+    await expect(head.locator(".f-grip")).toBeVisible();
+    await expect(head.locator(".f-grip")).toHaveAttribute("draggable", "true");
+    await expect(head.locator(".f-subfolder")).toHaveCount(1);
+    await expect(head.locator(".f-del")).toHaveCount(1);
+    expect(await background(page, MINE)).not.toBe(before);
+  });
+});
diff --git a/tests/js/footer-fit.test.mjs b/tests/js/footer-fit.test.mjs
new file mode 100644
index 00000000..0f74c9c7
--- /dev/null
+++ b/tests/js/footer-fit.test.mjs
@@ -0,0 +1,257 @@
+// The footer's fit-to-width decision, against a model of the strip's layout.
+//
+// #633: on a maximized 4K window at 250% Windows scaling the footer controls
+// "breathed" while a track played, every gap between clusters growing and
+// shrinking by the same share and Export Mix, outside the strip, standing
+// still. That is the strip's own width going up and down with space-between
+// spreading the difference, and footerFit re-measuring every time it did.
+//
+// A decision with a single threshold cannot settle there: any wobble across it
+// flips the level, the flip resizes the strip, and the observer fires again.
+// These checks pin the two thresholds that replaced it, so a strip sitting on
+// the boundary collapses once and stays put, and still opens back up when the
+// room really returns.
+//
+// The layout is a model, not a browser. What it has to get right is only what
+// footerFit reads: where each cluster's edges fall at each level. The widths
+// are close to a real track's but the exact values do not matter.
+
+const GAP = 16;
+const TIGHT_GAP = 8;
+// Transport, divider, Position, divider, Speed, divider, Global key, divider.
+const FIXED = [90, 1, 330, 1, 100, 1, 120, 1];
+// Click track: on/off pill, gap, volume pill, gap, then whatever holds the
+// options -- their inline span, the measured wrap width, or the 28px
+// disclosure that opens the popover.
+const CLICK_HEAD = 34 + 8 + 34 + 8;
+const PANEL_INLINE = 450;
+const MORE_BTN = 28;
+
+const sum = (a) => a.reduce((s, v) => s + v, 0);
+const NATURAL = sum(FIXED) + CLICK_HEAD + PANEL_INLINE + GAP * FIXED.length;
+const CLICK_W = sum(FIXED) + CLICK_HEAD + MORE_BTN + GAP * FIXED.length;
+const TIGHT_W = sum(FIXED) + CLICK_HEAD + MORE_BTN + TIGHT_GAP * FIXED.length;
+
+// ── A strip that lays itself out from its classes ─────────────────────────────
+
+let width = 2000; // the strip's own width, fractional like the real one
+
+const classes = new Set();
+const props = new Map();
+const classList = {
+  add: (c) => classes.add(c),
+  remove: (c) => classes.delete(c),
+  contains: (c) => classes.has(c),
+};
+const style = {
+  setProperty: (k, v) => props.set(k, String(v)),
+  removeProperty: (k) => props.delete(k),
+  get justifyContent() { return props.get('justify-content') ?? ''; },
+  set justifyContent(v) {
+    if (v) props.set('justify-content', v);
+    else props.delete('justify-content');
+  },
+};
+
+function layout() {
+  const click = classes.has('collapse-click');
+  const wrap = !click && classes.has('collapse-wrap');
+  const gap = classes.has('collapse-tight') ? TIGHT_GAP : GAP;
+  const wrapW = parseFloat(props.get('--metro-wrap-w')) || 380;
+  const widths = [...FIXED, CLICK_HEAD + (click ? MORE_BTN : wrap ? wrapW : PANEL_INLINE)];
+  const total = sum(widths) + gap * (widths.length - 1);
+  // space-between at the "click" level, unless something holds the row packed
+  // left. An overflowing row falls back to flex-start on its own.
+  let step = gap;
+  if (click && style.justifyContent !== 'flex-start' && total < width) {
+    step = gap + (width - total) / (widths.length - 1);
+  }
+  let x = 0;
+  const rects = widths.map((w) => {
+    const r = { left: x, right: x + w, width: w };
+    x += w + step;
+    return r;
+  });
+  return { rects, total, clickLeft: rects[rects.length - 1].left, inline: !click && !wrap };
+}
+
+const children = FIXED.concat([0]).map((_, i) => ({
+  getBoundingClientRect: () => layout().rects[i],
+}));
+
+// Integers, as the real ones are: these are what the version before #633 read.
+const strip = {
+  isConnected: true,
+  classList,
+  style,
+  children,
+  get clientWidth() { return Math.round(width); },
+  get scrollWidth() { return Math.max(Math.round(width), Math.round(layout().total)); },
+  getBoundingClientRect: () => ({ left: 0, right: width, width }),
+};
+
+// The options panel, for the wrap width. Its two outermost controls span
+// PANEL_INLINE while the options sit inline.
+const panelKid = (from, to) => ({
+  getBoundingClientRect() {
+    const l = layout();
+    if (!l.inline) return { left: 0, right: 0, width: 0 };
+    const left = l.clickLeft + CLICK_HEAD + from;
+    return { left, right: left + (to - from), width: to - from };
+  },
+});
+const panel = {
+  classList: { contains: () => false },
+  children: [panelKid(0, 120), panelKid(PANEL_INLINE - 90, PANEL_INLINE)],
+};
+
+globalThis.document = {
+  querySelector: (sel) => (sel === '.footer-clusters' ? strip : null),
+  getElementById: (id) => (id === 't-metro-panel' ? panel : null),
+};
+
+const events = [];
+globalThis.window = {
+  dispatchEvent: (e) => events.push(e.detail.level),
+  addEventListener: () => {},
+};
+if (typeof globalThis.CustomEvent !== 'function') {
+  globalThis.CustomEvent = class { constructor(type, init) { this.type = type; this.detail = init?.detail; } };
+}
+
+const frames = [];
+globalThis.requestAnimationFrame = (cb) => { frames.push(cb); return frames.length; };
+
+let observe = null;
+globalThis.ResizeObserver = class {
+  constructor(cb) { observe = cb; }
+  observe() {}
+};
+
+const { initFooterFit } = await import('../../static/js/footerFit.js');
+
+// ── Driving it ────────────────────────────────────────────────────────────────
+
+function flush() {
+  while (frames.length) frames.shift()();
+}
+
+// The strip becomes `w` wide: the observer reports it, and the fit runs on the
+// next frame the way it does in the browser.
+function resizeTo(w, height = 54) {
+  width = w;
+  observe([{ contentRect: { width: w, height } }]);
+  flush();
+}
+
+const levelNow = () => ['collapse-wrap', 'collapse-click', 'collapse-tight'].filter((c) => classes.has(c)).join(' ') || 'inline';
+
+let passed = 0;
+let failed = 0;
+
+function check(name, condition, detail = '') {
+  if (condition) {
+    passed++;
+    console.log(`PASS  ${name}`);
+  } else {
+    failed++;
+    console.log(`FAIL  ${name}${detail ? `  -- ${detail}` : ''}`);
+  }
+}
+
+// Width alternating between `a` and `b` for `n` frames, the way a scrollbar
+// arriving and leaving moves it. Returns every level the strip passed through.
+// How many times the level changed along the way.
+const changes = (seen) => seen.filter((l, i) => i && l !== seen[i - 1]).length;
+
+function wobble(a, b, n = 20) {
+  const seen = [];
+  for (let i = 0; i < n; i++) {
+    resizeTo(i % 2 ? b : a);
+    seen.push(levelNow());
+  }
+  return seen;
+}
+
+initFooterFit();
+flush();
+
+// Sanity: the model's thresholds are where the test thinks they are.
+resizeTo(NATURAL + 50);
+check('a wide strip stays fully inline', levelNow() === 'inline', levelNow());
+resizeTo(NATURAL - 20);
+check('a strip 20px short wraps the options', levelNow() === 'collapse-wrap', levelNow());
+resizeTo(CLICK_W - 10);
+check('a strip too short for any wrap goes to the popover and tightens', levelNow() === 'collapse-click collapse-tight', levelNow());
+
+{
+  // The inline/wrap boundary, with a 17px classic scrollbar coming and going.
+  resizeTo(NATURAL + 200);
+  events.length = 0;
+  const seen = wobble(NATURAL - 6, NATURAL + 11);
+  check(
+    'a scrollbar-sized wobble across the inline threshold collapses once and stays',
+    new Set(seen).size === 1 && seen[0] === 'collapse-wrap' && events.length === 1,
+    `levels=${[...new Set(seen)].join(',')} footerfit events=${events.length}`,
+  );
+}
+
+{
+  // The same wobble with sub-pixel amplitude: the 250% case, where one layout
+  // reads either side of the line depending on how it rounds.
+  resizeTo(NATURAL + 200);
+  events.length = 0;
+  const seen = wobble(NATURAL + 0.4, NATURAL - 0.4);
+  check(
+    'a sub-pixel wobble across the inline threshold settles',
+    changes(seen) <= 1 && events.length <= 1,
+    `levels=${[...new Set(seen)].join(',')} footerfit events=${events.length}`,
+  );
+}
+
+{
+  // The popover boundary, where space-between spreads the row: the level whose
+  // gaps visibly breathed in the report.
+  resizeTo(TIGHT_W + 200);
+  const settled = levelNow();
+  events.length = 0;
+  const seen = wobble(CLICK_W - 6, CLICK_W + 11);
+  check(
+    'a wobble across the popover/tight threshold collapses once and stays',
+    new Set(seen).size === 1 && seen[0] === 'collapse-click collapse-tight' && events.length === 1,
+    `from=${settled} levels=${[...new Set(seen)].join(',')} footerfit events=${events.length}`,
+  );
+}
+
+{
+  // Hysteresis must not turn into a ratchet: real room still opens it back up.
+  resizeTo(CLICK_W - 10);
+  resizeTo(NATURAL + 30);
+  check('the strip opens fully back up once the room really returns', levelNow() === 'inline', levelNow());
+}
+
+{
+  // And it never keeps a level that overflows: collapsing needs no slack.
+  resizeTo(NATURAL + 30);
+  resizeTo(NATURAL - 0.5);
+  check('half a pixel short is still short', levelNow() !== 'inline', levelNow());
+}
+
+{
+  // The strip's height is an output of the fit. A notification that only
+  // changes it must not schedule another pass.
+  resizeTo(NATURAL - 20);
+  observe([{ contentRect: { width, height: 97 } }]);
+  check('a height-only resize does not re-fit', frames.length === 0, `queued=${frames.length}`);
+  flush();
+}
+
+{
+  // Measured left-packed, then handed back to the stylesheet: the inline hold
+  // must not outlive the pass, or the popover level never spreads.
+  resizeTo(CLICK_W + 5);
+  check('the left-packed hold is released after measuring', style.justifyContent === '', style.justifyContent);
+}
+
+console.log(`\n${passed} passed, ${failed} failed`);
+if (failed) process.exit(1);