Grow the up-next preview to a five-deep vertical stack on desktop

Phones keep the two-tile strip. On wide screens (the existing 900px
breakpoint) the strip now fills five tiles bottom-up via column-reverse:
the very next image sits at the bottom, the farthest-out on top. Tiles
cap at 12dvh so all five fit inside the stage on short windows, and the
JS fill count follows the same media query live on resize.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EHGNXqgRVUa2qVY6SYofg9

Author: claude

e2e/tests/triage.spec.js

@@ -31,6 +31,26 @@ test.beforeEach(async ({ page }) => {
     page.locator("#cards .card").count()).toBe(3);
 });
 
+// These two run first: later tests decide items (trash/keep), shrinking the
+// shared seeded library below the 4 undecided-behind-the-top-card these counts
+// assume.
+test("desktop stacks the up-next previews vertically, next at the bottom", async ({ page }) => {
+  // 5 seeded items: one is the top card, so all 4 others fit in the desktop
+  // preview stack (capacity 5).
+  const tiles = page.locator("#upnext .upnext-tile:not(.hidden)");
+  await expect(tiles).toHaveCount(4);
+  // column-reverse is what puts the next-up image at the bottom and the
+  // farthest-out on top.
+  const dir = await page.locator("#upnext")
+    .evaluate((el) => getComputedStyle(el).flexDirection);
+  expect(dir).toBe("column-reverse");
+});
+
+test("a phone-width viewport keeps the two-tile preview", async ({ page }) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await expect(page.locator("#upnext .upnext-tile:not(.hidden)")).toHaveCount(2);
+});
+
 test("keep advances the stack and undo brings the card back", async ({ page }) => {
   const first = await topCardId(page);
   expect(first).toBeTruthy();

frontend/app.js

@@ -192,9 +192,13 @@ function topUpVisible() {
 const cardEls = new Map();   // item.id -> card element (reused across renders)
 
 // --- "up next" preview -------------------------------------------------------
-// Two static tiles created once in index.html; JS only toggles classes and
+// Five static tiles created once in index.html; JS only toggles classes and
 // swaps src on identity change, so the imgs are never recreated (no flicker).
+// Phones fill just the first two; wide screens fill all five as a vertical
+// stack. The breakpoint must match the .upnext media query in styles.css.
 const upnextTiles = [...document.querySelectorAll("#upnext .upnext-tile")];
+const upnextWide = window.matchMedia("(min-width: 900px)");
+upnextWide.addEventListener("change", () => updateUpNext());
 
 // Tile resolution: 256 on phones, 512 once the CSS clamp grows tiles past
 // ~256 device px (iPad/desktop, retina).
@@ -205,8 +209,10 @@ function upnextRes() {
 
 function updateUpNext() {
   // The queue front is state.visible (top = index 0), refilled from
-  // state.buffer, so the two items after the top card are:
-  const upcoming = [...state.visible.slice(1, VISIBLE), ...state.buffer].slice(0, 2);
+  // state.buffer, so the items after the top card are:
+  const shown = upnextWide.matches ? upnextTiles.length : 2;
+  const upcoming =
+    [...state.visible.slice(1, VISIBLE), ...state.buffer].slice(0, shown);
   const size = upnextRes();
   upnextTiles.forEach((tile, i) => {
     const item = upcoming[i];

frontend/index.html

@@ -55,6 +55,9 @@
     <div id="upnext" class="upnext hidden" aria-hidden="true">
       <div class="upnext-tile hidden"><img alt="" decoding="async"><span class="upnext-copies hidden"></span></div>
       <div class="upnext-tile hidden"><img alt="" decoding="async"><span class="upnext-copies hidden"></span></div>
+      <div class="upnext-tile hidden"><img alt="" decoding="async"><span class="upnext-copies hidden"></span></div>
+      <div class="upnext-tile hidden"><img alt="" decoding="async"><span class="upnext-copies hidden"></span></div>
+      <div class="upnext-tile hidden"><img alt="" decoding="async"><span class="upnext-copies hidden"></span></div>
     </div>
   </main>
 

frontend/styles.css

@@ -167,20 +167,28 @@ body {
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 
-/* "Up next" preview: the next two queue items, pinned bottom-right of the
-   stage. Tile size clamps across three anchors: 64px (phones) -> 9vw
-   (scales with viewport) -> 128px (iPad/desktop). z105: above the cards
-   (z100..98, set in setDepth) but below the backdrop (z110) so an open
-   sheet dims it. pointer-events: none so it can never eat a swipe that
-   starts over the card's corner. */
+/* "Up next" preview, pinned bottom-right of the stage: the next two queue
+   items on phones, the next five on wide screens. Tile size clamps across
+   three anchors: 64px (phones) -> 9vw (scales with viewport) -> 128px
+   (iPad/desktop). z105: above the cards (z100..98, set in setDepth) but
+   below the backdrop (z110) so an open sheet dims it. pointer-events: none
+   so it can never eat a swipe that starts over the card's corner. */
 .upnext {
   --upnext-size: clamp(64px, 9vw, 128px);
   position: absolute; right: 10px; bottom: 10px;
   display: flex; flex-direction: column; gap: 8px;
   z-index: 105; pointer-events: none;
 }
-/* Wide screens: sit the tiles side-by-side at the max clamp size. */
-@media (min-width: 900px) { .upnext { flex-direction: row; } }
+/* Wide screens: a vertical stack of up to five, filled bottom-up — the very
+   next image sits at the bottom, the farthest-out on top. The 12dvh cap
+   keeps all five inside the stage on short windows; the JS fill count keys
+   off this same 900px breakpoint. */
+@media (min-width: 900px) {
+  .upnext {
+    flex-direction: column-reverse;
+    --upnext-size: min(128px, 12dvh);
+  }
+}
 .upnext-tile {
   position: relative;
   width: var(--upnext-size); height: var(--upnext-size);