web: let a wheel tick walk the strip sideways

docker/frontend/scripts/library-check.mjs

@@ -381,6 +381,22 @@ await page.click(`[data-key="lib-thumb-${rawId}"]`);
 const meta = await page.locator('[data-key="lib-stage-meta"]').innerText();
 step('the frame says it was edited', /đã chỉnh|edited/.test(meta), meta.replace(/\n/g, ' · '));
 
+// The strip is a shelf, not a page: when the open folder holds more frames than
+// fit, a plain wheel tick over it walks them along — a wheel has no sideways
+// axis to scroll a row with. The window is narrowed until the three tiles of the
+// open roll no longer fit, which is what a long roll looks like anyway.
+await page.click('[data-key="lib-node-CheckRoll"]');
+await page.waitForFunction((sel) => document.querySelectorAll(sel).length === 3, thumbs, { timeout: 30_000 });
+await page.setViewportSize({ width: 320, height: 720 });
+await page.waitForTimeout(200);
+const shelf = await page.$eval('[data-key="lib-strip"]', (el) => ({ sw: el.scrollWidth, cw: el.clientWidth }));
+const shelfBox = await (await page.$('[data-key="lib-strip"]')).boundingBox();
+await page.mouse.move(shelfBox.x + shelfBox.width / 2, shelfBox.y + shelfBox.height / 2);
+await page.mouse.wheel(0, 200);
+await page.waitForTimeout(300);
+const walked = await page.$eval('[data-key="lib-strip"]', (el) => el.scrollLeft);
+step('a wheel tick walks the strip along', shelf.sw > shelf.cw && walked > 0, `${shelf.sw}px of tiles in ${shelf.cw}px, scrolled to ${walked}`);
+
 await browser.close();
 sampleServer.close();
 app.kill('SIGTERM');

docker/frontend/src/Library.tsx

@@ -592,7 +592,15 @@ export function Library() {
                 {/* The strip: one thumbnail per frame the open node holds, in the
                     order the catalogue reads them (newest shutter first). */}
                 {view === 'preview' ? (
-                  <div className="adm-filmstrip" data-key="lib-strip">
+                  <div
+                    className="adm-filmstrip"
+                    data-key="lib-strip"
+                    // A wheel has no sideways axis, so a plain tick over the strip
+                    // walks the frames along it. Nothing else there can scroll.
+                    onWheel={(e) => {
+                      if (!e.deltaX) e.currentTarget.scrollLeft += e.deltaY;
+                    }}
+                  >
                     {shown.map((photo) => (
                       <button
                         key={photo.id}