Join's clip list scrolls while a join runs

docs/MANUAL-TESTING.md

@@ -2916,3 +2916,35 @@ Two things Will found on beta.7:
       and the last clip's Move Down are still disabled.
 - [ ] Do it again and press **Cancel**: everything unlocks the same way.
 - [ ] Look at it in both light and dark themes.
+
+## Join's long list still scrolls while it joins (2026-10-23)
+
+One thing Will found on beta.8:
+
+- **A long Join list couldn't be scrolled while it ran.** The lock made the
+  whole scrolling area inert, and an inert area takes its vertical scrollbar
+  and mouse wheel with it, so with many clips the ones below the fold couldn't
+  be looked at until the join ended. Now only the clips and **Add More** are
+  locked and greyed; the list around them scrolls as normal.
+
+> **Status: not yet run by hand.** Driven once in the running app on
+> 2026-10-23 (14 clips, so the list overflows; the lock simulated by setting
+> the running state): the mouse wheel and a click in the scrollbar's track both
+> scrolled the locked list, the clips and Add More stayed inert and at half
+> opacity, a forced click on a clip's Remove did nothing, and everything came
+> back at full opacity afterwards.
+
+### Scrolling while locked
+
+- [ ] In Join, add enough clips that the list needs a scrollbar (a dozen short
+      videos is plenty), choose a folder, and press **Join** with clips that
+      need a re-encode (different sizes), so it runs long enough to try this.
+- [ ] While it runs, scroll the list with the **mouse wheel**, by **dragging the
+      scrollbar** and by clicking in its track. All three work.
+- [ ] The clips and **Add More** are still greyed out and locked: Trim, Move Up
+      and Down, Remove and Add More do nothing, and Tab doesn't reach them.
+- [ ] **Join into**, **File name** and **Browse** are still greyed out;
+      **Clear** is disabled; **Cancel** works.
+- [ ] When the join ends, everything is back at full strength and you are
+      still where you scrolled to.
+- [ ] Look at it in both light and dark themes.

package.json

@@ -1,6 +1,6 @@
 {
     "name": "diamond-file-converter",
-    "version": "2.0.0-beta.8",
+    "version": "2.0.0-beta.9",
     "description": "An Electron-based desktop app for converting audio, video, and image files.",
     "main": "src/main.js",
     "funding": {

src/renderer.js

@@ -2065,12 +2065,14 @@ function renderJoinActions() {
  * While a join runs, everything that configures it is greyed out and locked:
  * the clip list (order, trims, removing, Add More) and the side's fields. The
  * list is made inert rather than each control disabled, so the rows keep their
- * own disabled states (the first row's Move Up) for when it unlocks.
+ * own disabled states (the first row's Move Up) for when it unlocks. The
+ * scroller itself stays live: an inert scroller takes its scrollbar and wheel
+ * with it, and a long list needs to be looked through while it joins.
  */
 function renderJoinLock() {
     const locked = Boolean(joinRunning);
     const scroll = document.querySelector("#join-body .join-scroll");
-    scroll.inert = locked;
+    for (const child of scroll.children) child.inert = locked;
     scroll.classList.toggle("is-locked", locked);
     for (const id of ["join-format", "join-name", "btn-join-browse"]) $(id).disabled = locked;
 }

src/styles.css

@@ -668,7 +668,8 @@ a {
 .join-progress-text { margin-top: 0.35rem; font-size: 0.8rem; text-align: left; opacity: 0.75; }
 
 /* While a join runs the list can't change, and looks it. */
-.join-scroll.is-locked { opacity: 0.5; transition: opacity var(--dur-state) var(--ease-state); }
+.join-scroll > * { transition: opacity var(--dur-state) var(--ease-state); }
+.join-scroll.is-locked > * { opacity: 0.5; }
 
 .join-actions { margin-top: auto; padding-top: 0.9rem; display: flex; gap: 0.5rem; justify-content: flex-end; }
 

test/kit.test.js

@@ -171,8 +171,10 @@ test("Join's bar has \"Joining XX%\" under it, and its settings lock while it ru
     assert.match(html, /id="join-progress-text"/);
     assert.match(renderer, /`Joining \$\{Math\.round\(/);
     assert.match(renderer, /: "Joining…";/);
-    // The list goes inert and grey; the side's fields are disabled.
-    assert.match(renderer, /scroll\.inert = locked;/);
+    // The list and Add More go inert and grey; the side's fields are disabled.
+    // The scroller itself is never inert, or a long list couldn't be scrolled.
+    assert.match(renderer, /for \(const child of scroll\.children\) child\.inert = locked;/);
+    assert.ok(!/scroll\.inert\b/.test(renderer), "an inert scroller loses its scrollbar");
     assert.match(renderer, /\["join-format", "join-name", "btn-join-browse"\]\) \$\(id\)\.disabled = locked;/);
     // A drop during a join doesn't change what's being joined.
     assert.match(renderer, /if \(joinRunning\) \{\r?\n\s+kit\.ui\.toast\("Wait for the join to finish/);