cursedbelt 5.74.0 → 5.75.0

package/src/react/media/DenseGalleryShell.tsx

@@ -1,5 +1,5 @@
 import './denseGallery.css';
-import { ChevronLeft, ChevronRight, Maximize2, Minimize2 } from 'lucide-react';
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Maximize2, Minimize2 } from 'lucide-react';
 import {
   type ButtonHTMLAttributes,
   type CSSProperties,
@@ -8,6 +8,8 @@ import {
   type Ref,
   useCallback,
   useEffect,
+  useId,
+  useLayoutEffect,
   useState,
 } from 'react';
 import { VirtualMediaGrid } from './VirtualMediaGrid.js';
@@ -558,8 +560,23 @@ export function DenseGalleryDetail({
        */
       const top = watchEl.querySelector('.cbgd-watch-top');
       const frame = watchEl.querySelector('.cbgd-watch-player-box');
-      const chromePx =
-        top && frame
+      /*
+       * 🔴 A phone on its SIDE puts the titlebar BESIDE the frame (`--cbgd-stage-beside`, set by
+       * `denseGallery.css`'s short-landscape block), so nothing of the chrome is under the
+       * picture: only the region's own padding is. Measuring the region there would be a loop —
+       * the titlebar's column is whatever width the frame leaves it, so its height depends on
+       * the frame's — and the stylesheet's share (`--cbgd-stage-share`) is the whole height.
+       */
+      const style = getComputedStyle(watchEl);
+      const beside = style.getPropertyValue('--cbgd-stage-beside').trim() === '1';
+      const shareVar = Number.parseFloat(style.getPropertyValue('--cbgd-stage-share'));
+      const share = Number.isFinite(shareVar) && shareVar > 0 ? shareVar : STAGE_SHARE;
+      const topStyle = top ? getComputedStyle(top) : null;
+      const chromePx = beside
+        ? Math.round(
+            Number.parseFloat(topStyle?.paddingTop ?? '0') + Number.parseFloat(topStyle?.paddingBottom ?? '0'),
+          )
+        : top && frame
           ? Math.round(
               top.getBoundingClientRect().height - frame.getBoundingClientRect().height,
             )
@@ -569,8 +586,12 @@ export function DenseGalleryDetail({
       // `max()`, because a rule that can GROW the stage tracks the content it is measuring
       // and chases itself. That guard reads the source text, so the JS clamp is written in a
       // form that cannot be mistaken for the thing it forbids.
-      const usable = available > chromePx ? available - chromePx : 0;
-      const fit = `min(${Math.round(usable * STAGE_SHARE)}px, var(--cbgd-stage-default))`;
+      // Beside, the frame is measured against the SCROLLER itself: its parent also holds the
+      // app's page header, and the whole point is that the picture fits the scroller's height.
+      // Loop-free — the scroller's box is its parent's layout, not its content's.
+      const room = beside ? watchEl.clientHeight : available;
+      const usable = room > chromePx ? room - chromePx : 0;
+      const fit = `min(${Math.round(usable * share)}px, var(--cbgd-stage-default))`;
       if (fit === last) return;
       last = fit;
       watchEl.style.setProperty('--cbgd-stage-fit', fit);
@@ -689,6 +710,51 @@ export function DenseGalleryDetail({
 
   const effectiveStageHeight = dragHeight !== null ? `${dragHeight}px` : stageHeight;
 
+  /*
+   * 🔴 On a phone the action row is ONE line, and what does not fit FOLDS behind a toggle.
+   *
+   * Owner, 2026-10-10, on an iPhone: *"the icons over the media player go out of the right side
+   * of the screen."* The row scrolled sideways with its scrollbar hidden (task 2424 chose one
+   * row over three wrapped ones), so it read as icons cut off by the screen's edge with no sign
+   * there were more. Now the row wraps but is clipped to its first line, and a toggle at its end
+   * — drawn only when something is actually clipped — opens the rest in place, the way iOS
+   * Photos and Linear's mobile issue bar do. One line stays the default, so the files are still
+   * right under the picture.
+   *
+   * The CSS decides WHERE the fold applies (`.cbgd-actions-more` is `display: none` outside the
+   * phone block); this only measures whether anything is past the first line. Measured on every
+   * render because the row's contents change (an inline rename swaps buttons for a form) without
+   * its clipped box changing size, and on resize for the width.
+   */
+  const actionsId = useId();
+  const [actionsEl, setActionsEl] = useState<HTMLElement | null>(null);
+  const [actionsOpen, setActionsOpen] = useState(false);
+  const [actionsFold, setActionsFold] = useState(false);
+  const measureFold = useCallback(() => {
+    if (!actionsEl) return;
+    const kids = [...actionsEl.children] as HTMLElement[];
+    const first = Math.min(...kids.map((kid) => kid.offsetTop));
+    let folds = false;
+    for (const kid of kids) {
+      const folded = kid.offsetTop > first + 4;
+      folds ||= folded;
+      // A control on a folded line is out of reach, so it is out of the tab order and the
+      // accessibility tree too (`visibility: hidden` in the phone block), not merely clipped.
+      kid.toggleAttribute('data-cbgd-folded', folded && !actionsOpen);
+    }
+    setActionsFold((current) => (current === folds ? current : folds));
+  }, [actionsEl, actionsOpen]);
+  // No dependency list: every render, on purpose — see above.
+  useLayoutEffect(() => {
+    measureFold();
+  });
+  useEffect(() => {
+    if (!actionsEl || typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measureFold);
+    observer.observe(actionsEl);
+    return () => observer.disconnect();
+  }, [actionsEl, measureFold]);
+
   return (
     <div
       ref={setWatchEl}
@@ -743,7 +809,11 @@ export function DenseGalleryDetail({
           <div className='cbgd-watch-titlebar'>
             <span className='cbgd-watch-title'>{title}</span>
             {meta ? <span className='cbgd-meta-line'>{meta}</span> : null}
-            <span className='cbgd-watch-actions'>
+            <span
+              ref={setActionsEl}
+              className={`cbgd-watch-actions${actionsOpen ? ' is-open' : ''}`}
+              id={actionsId}
+            >
               {/*
                * 🔴 Stepping lives in the TITLEBAR now, not on the picture.
                *
@@ -811,6 +881,20 @@ export function DenseGalleryDetail({
                 </button>
               </Tooltip>
             </span>
+            {actionsFold || actionsOpen ? (
+              <span className='cbgd-actions-more'>
+              <GalleryActionButton
+                iconOnly
+                tooltip={actionsOpen ? 'Fold the actions back to one line' : 'Show every action'}
+                aria-label={actionsOpen ? 'Fewer actions' : 'More actions'}
+                aria-expanded={actionsOpen}
+                aria-controls={actionsId}
+                onClick={() => setActionsOpen(!actionsOpen)}
+              >
+                {actionsOpen ? <ChevronUp aria-hidden /> : <ChevronDown aria-hidden />}
+              </GalleryActionButton>
+              </span>
+            ) : null}
           </div>
         </div>
         {rail ? (

package/src/react/media/HoverScrubVideoThumb.spec.tsx

@@ -3,6 +3,10 @@ import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
 import { HoverScrubVideoThumb } from './HoverScrubVideoThumb.js';
 
+/** `HoverScrubVideoThumb`'s hold threshold (300ms), spelled here so this file still loads against
+ *  a tile that predates the hold — the proof that these specs fail without it. */
+const TOUCH_HOLD_MS = 300;
+
 afterEach(cleanup);
 
 const video: PlayableVideo = {
@@ -91,4 +95,82 @@ describe('HoverScrubVideoThumb', () => {
     expect(opened).toBe(1);
     expect(getByText('meta line')).toBeDefined();
   });
+
+  /**
+   * 🔴 On a PHONE. Owner, 2026-10-10, on an iPhone: *"The play icon above the player clicked but
+   * it did not make all the video thumbnails start playing like I thought it would."* The tile
+   * dropped `autoPlay` under a coarse pointer, so "Preview all" lit up and nothing moved.
+   */
+  test('🔴 autoPlay previews on a touch screen too', async () => {
+    const real = window.matchMedia;
+    window.matchMedia = ((query: string) => ({ ...real.call(window, query), matches: false })) as typeof window.matchMedia;
+    try {
+      const { container } = render(<HoverScrubVideoThumb video={video} onOpen={() => {}} autoPlay />);
+      await waitFor(() => expect(container.querySelector('video')).not.toBeNull());
+    } finally {
+      window.matchMedia = real;
+    }
+  });
+
+  describe('🔴 touch-and-hold previews, and the preview stays after the finger lifts', () => {
+    const hold = async (tile: HTMLElement, opts: { moveBy?: number } = {}) => {
+      fireEvent.pointerDown(tile, { pointerType: 'touch', clientX: 50, clientY: 50 });
+      if (opts.moveBy) fireEvent.pointerMove(tile, { pointerType: 'touch', clientX: 50, clientY: 50 + opts.moveBy });
+      await new Promise((resolve) => setTimeout(resolve, TOUCH_HOLD_MS + 60));
+      fireEvent.pointerUp(tile, { pointerType: 'touch' });
+    };
+
+    test('a hold starts the preview, lifting keeps it, and the lift does not open the file', async () => {
+      let opened = 0;
+      const { container, getByRole } = render(
+        <HoverScrubVideoThumb video={video} onOpen={() => (opened += 1)} />,
+      );
+      const tile = getByRole('button', { name: 'Open Clip one' });
+      await hold(tile);
+      expect(container.querySelector('video')).not.toBeNull();
+      // The click the lift produces is the hold's, not a tap.
+      fireEvent.click(tile);
+      expect(opened).toBe(0);
+      expect(container.querySelector('video')).not.toBeNull();
+      // A real tap afterwards opens as always.
+      fireEvent.click(tile);
+      expect(opened).toBe(1);
+    });
+
+    test('a quick tap is a tap — no preview, it opens', () => {
+      let opened = 0;
+      const { container, getByRole } = render(
+        <HoverScrubVideoThumb video={video} onOpen={() => (opened += 1)} />,
+      );
+      const tile = getByRole('button', { name: 'Open Clip one' });
+      fireEvent.pointerDown(tile, { pointerType: 'touch', clientX: 50, clientY: 50 });
+      fireEvent.pointerUp(tile, { pointerType: 'touch' });
+      fireEvent.click(tile);
+      expect(opened).toBe(1);
+      expect(container.querySelector('video')).toBeNull();
+    });
+
+    test('a finger that moves is a scroll, not a hold', async () => {
+      const { container, getByRole } = render(<HoverScrubVideoThumb video={video} onOpen={() => {}} />);
+      await hold(getByRole('button', { name: 'Open Clip one' }), { moveBy: 40 });
+      expect(container.querySelector('video')).toBeNull();
+    });
+
+    test('holding a second tile stops the first', async () => {
+      const other: PlayableVideo = { ...video, id: 'v2', name: 'Clip two' };
+      const { container, getByRole } = render(
+        <>
+          <HoverScrubVideoThumb video={video} onOpen={() => {}} />
+          <HoverScrubVideoThumb video={other} onOpen={() => {}} />
+        </>,
+      );
+      await hold(getByRole('button', { name: 'Open Clip one' }));
+      expect(container.querySelectorAll('video').length).toBe(1);
+      await hold(getByRole('button', { name: 'Open Clip two' }));
+      const playing = container.querySelectorAll('[data-held-preview="true"]');
+      expect(playing.length).toBe(1);
+      expect(playing[0]?.getAttribute('aria-label')).toBe('Open Clip two');
+      expect(container.querySelectorAll('video').length).toBe(1);
+    });
+  });
 });

package/src/react/media/HoverScrubVideoThumb.tsx

@@ -1,5 +1,13 @@
 import { Play } from 'lucide-react';
-import { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react';
+import {
+  type CSSProperties,
+  type MouseEvent,
+  type PointerEvent,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import type { PlayableVideo } from 'cursedbelt-core/media';
 import { formatTimecode } from 'cursedbelt-core/media';
 import { cn } from '../lib/cn.js';
@@ -31,7 +39,17 @@ function turnStyle(orientation: MediaOrientation | undefined): CSSProperties | u
 /** Source offsets (fractions of duration) a scrub preview steps through. */
 const SCRUB_POINTS = [0.1, 0.3, 0.5, 0.7, 0.9];
 const SCRUB_STEP_MS = 900;
+/** How long a finger rests on a tile before it counts as a hold rather than a tap. */
 const TOUCH_HOLD_MS = 300;
+/** How far a finger may wander during a hold before it is a scroll instead — a resting thumb is
+ *  never perfectly still, and a hold that any jitter cancelled would read as one that never works. */
+const TOUCH_HOLD_SLOP_PX = 10;
+
+/**
+ * The one tile a touch-and-hold is previewing — so holding a SECOND tile stops the first, and a
+ * phone never accumulates a preview per tile the reader has ever held.
+ */
+let stopHeldPreview: (() => void) | null = null;
 
 /**
  * Step a muted preview through spaced source offsets, so a preview tours the WHOLE video
@@ -74,14 +92,10 @@ export function useScrubPreview(
 /**
  * True only on devices that can actually hover with a fine pointer (a mouse).
  *
- * Touch phones/tablets report `(hover: none)`; there an `autoPlay` preview is suppressed so a
- * thumbnail never silently plays under a finger, and a preview still starts on an explicit
- * touch-and-hold. Starts `false` so the very first paint never autoplays, then resolves after
- * mount.
- *
- * 🔴 Exported alongside {@link useScrubPreview} for the same reason — the table view has to
- * make the SAME decision about coarse pointers as the grid, and two copies of a media query is
- * how one view ends up playing ninety clips on a phone.
+ * Touch phones/tablets report `(hover: none)`. It no longer gates `autoPlay` (see that prop's
+ * note); it decides what a press-and-hold MEANS — a drag to re-file the tile
+ * with a mouse, a preview under a finger — so the gallery's tile wrapper is draggable only where
+ * this is true. Starts `false`, then resolves after mount.
  */
 export function useCanHover(): boolean {
 	const [canHover, setCanHover] = useState(false);
@@ -107,11 +121,17 @@ export interface HoverScrubVideoThumbProps {
    */
   previewMode?: 'scrub' | 'loop';
   /**
-   * Preview continuously without hover — the watch page's silent side tiles.
+   * Preview continuously without hover — the gallery's "Preview all".
    *
    * 🔴 Gated: the preview starts only once the tile is ON SCREEN and has stayed there for
    * `PREVIEW_SETTLE_MS` (`previewGate.ts`), so a grid scrolled past fast never opens a stream
    * per row. Without an `IntersectionObserver` the tile counts as visible.
+   *
+   * 🔴 Honoured on a TOUCH screen too. It was suppressed under a coarse pointer until
+   * 2026-10-10, so the "Preview all" button on a phone lit up and nothing moved — owner, on an
+   * iPhone: *"The play icon above the player clicked but it did not make all the video
+   * thumbnails start playing like I thought it would."* A control the reader pressed is the
+   * request; the gate above is what keeps it to the tiles actually on screen.
    */
   autoPlay?: boolean;
   /** Small overlay chips (top-left slot) — e.g. a quality badge. */
@@ -153,27 +173,83 @@ export function HoverScrubVideoThumb({
    *  poster that appears later arrives on the next load, which is the state the
    *  derived-poster contract already describes. */
   const [posterFailed, setPosterFailed] = useState(false);
-  const canHover = useCanHover();
-  // On touch devices ignore `autoPlay` — an unrequested video playing under the
-  // finger reads as a bug (and iOS shows a stack of them below the watch player).
-  // Touch-and-hold still triggers `hovering` → a preview on demand.
+  /**
+   * A touch-and-hold's preview — and it STAYS on after the finger lifts.
+   *
+   * Owner, 2026-10-10, on an iPhone: *"holding down on a thumbnail should make it start
+   * previewing the video."* It used to preview only while held: under the thumb that was
+   * holding it, and stopped by the very lift that then fired the tile's click and opened the
+   * file. So now a hold LATCHES the preview, the lift after a hold is not a click, a plain tap
+   * still opens, and the preview ends when the tile leaves the screen or another tile is held.
+   */
+  const [held, setHeld] = useState(false);
   const boxRef = useRef<HTMLDivElement>(null);
-  const wantsAuto = autoPlay && canHover;
   // A hover is not gated: the pointer on the tile IS the intent the settle exists to infer.
-  const autoReady = useSettled(useInView(boxRef, wantsAuto));
-  const previewing = autoReady || hovering;
-  const holdTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const autoReady = useSettled(useInView(boxRef, autoPlay));
+  const heldInView = useInView(boxRef, held);
+  const previewing = autoReady || hovering || held;
+  const hold = useRef<{ timer: ReturnType<typeof setTimeout>; x: number; y: number } | null>(null);
+  /** Set by a hold that latched, so the click the lift produces opens nothing. */
+  const swallowClick = useRef(false);
   const videoRef = useRef<HTMLVideoElement>(null);
 
-  const startHold = () => {
-    holdTimer.current = setTimeout(() => setHovering(true), TOUCH_HOLD_MS);
+  const stopHeld = useRef(() => setHeld(false)).current;
+  const clearHold = () => {
+    if (hold.current) clearTimeout(hold.current.timer);
+    hold.current = null;
   };
-  const cancelHold = () => {
-    if (holdTimer.current) clearTimeout(holdTimer.current);
-    holdTimer.current = null;
-    setHovering(false);
+  const onPointerDown = (event: PointerEvent<HTMLElement>) => {
+    if (event.pointerType !== 'touch') return;
+    clearHold();
+    const timer = setTimeout(() => {
+      hold.current = null;
+      if (stopHeldPreview && stopHeldPreview !== stopHeld) stopHeldPreview();
+      stopHeldPreview = stopHeld;
+      swallowClick.current = true;
+      setHeld(true);
+    }, TOUCH_HOLD_MS);
+    hold.current = { timer, x: event.clientX, y: event.clientY };
+  };
+  const onPointerMove = (event: PointerEvent<HTMLElement>) => {
+    const start = hold.current;
+    if (!start) return;
+    if (Math.hypot(event.clientX - start.x, event.clientY - start.y) > TOUCH_HOLD_SLOP_PX) clearHold();
+  };
+  const onClickCapture = (event: MouseEvent<HTMLElement>) => {
+    if (!swallowClick.current) return;
+    swallowClick.current = false;
+    event.preventDefault();
+    event.stopPropagation();
   };
 
+  // A held preview ends when its tile scrolls away (and a hold that never got a click — the lift
+  // landed off the tile — must not eat the next real tap).
+  useEffect(() => {
+    if (!held) return;
+    const reset = setTimeout(() => {
+      swallowClick.current = false;
+    }, 1000);
+    return () => clearTimeout(reset);
+  }, [held]);
+  const seenInView = useRef(false);
+  useEffect(() => {
+    if (!held) {
+      seenInView.current = false;
+      return;
+    }
+    if (heldInView) seenInView.current = true;
+    else if (seenInView.current) setHeld(false);
+  }, [held, heldInView]);
+  // Unmount only: a pending hold must not fire into an unmounted tile.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: unmount-only cleanup; both read refs
+  useEffect(
+    () => () => {
+      if (hold.current) clearTimeout(hold.current.timer);
+      if (stopHeldPreview === stopHeld) stopHeldPreview = null;
+    },
+    [],
+  );
+
   useScrubPreview(videoRef, {
     active: previewing && previewMode === 'scrub',
     durationSeconds: video.durationSeconds,
@@ -335,12 +411,24 @@ export function HoverScrubVideoThumb({
       // GalleryApp "opens a video — navigation" precedent).
       type='button'
       onClick={onOpen}
+      onClickCapture={onClickCapture}
       onMouseEnter={() => setHovering(true)}
       onMouseLeave={() => setHovering(false)}
-      onTouchStart={startHold}
-      onTouchEnd={cancelHold}
-      onTouchMove={cancelHold}
-      className={cn(RAW_BUTTON, cardClassName, 'hover:border-accent-solid focus-visible:ring-2 focus-visible:ring-accent-solid')}
+      onPointerDown={onPointerDown}
+      onPointerMove={onPointerMove}
+      onPointerUp={clearHold}
+      onPointerCancel={clearHold}
+      // A hold is a preview, not the browser's own long-press: no "Save image" callout, no text
+      // selection, no context menu (Android's long-press) over the tile.
+      onContextMenu={(event) => {
+        if (hold.current || swallowClick.current) event.preventDefault();
+      }}
+      data-held-preview={held ? 'true' : undefined}
+      className={cn(
+        RAW_BUTTON,
+        cardClassName,
+        '[-webkit-touch-callout:none] select-none hover:border-accent-solid focus-visible:ring-2 focus-visible:ring-accent-solid',
+      )}
       aria-label={`Open ${video.name}`}
     >
       {media}

package/src/react/media/denseGallery.css

@@ -767,6 +767,11 @@
 	gap: 6px;
 	flex-wrap: wrap;
 }
+/* The phone's fold toggle (`DenseGalleryDetail`'s `actionsFold`) — only the phone block below
+   folds the row, so everywhere else the row wraps in full and the toggle is never drawn. */
+.cbgd-actions-more {
+	display: none;
+}
 .cbgd-watch-rail {
 	display: flex;
 	flex-direction: column;
@@ -864,20 +869,111 @@
 	.cbgd-watch-player > .cbmr-rail {
 		max-width: 100%;
 	}
-	/* The titlebar's actions are ONE row that scrolls sideways, not three rows that wrap — a
-	   dozen 44px icon buttons wrapped put the related files a whole screen below the picture. */
+	/*
+	 * 🔴 The titlebar's actions are ONE line, and the rest FOLD behind the toggle at its end.
+	 *
+	 * Three wrapped rows of 44px icons put the related files a whole screen below the picture
+	 * (task 2424), so it became one row that scrolled sideways — with its scrollbar hidden, which
+	 * the owner read as a bug on 2026-10-10: *"the icons over the media player go out of the right
+	 * side of the screen."* Now the row wraps but shows only its first line (`overflow: clip`, so
+	 * a focused button on the folded lines cannot scroll the row either), and `.cbgd-actions-more`
+	 * beside it opens the rest in place. collections' `e2e/layout.browser.test.ts` measures it on a phone.
+	 */
 	.cbgd-watch-actions {
 		margin-left: 0;
-		flex-basis: 100%;
-		flex-wrap: nowrap;
-		/* guardrails-ignore no-raw-overflow: task 2424 — a one-row tool strip in the Tailwind-free `.cbgd-` shell. */
-		overflow-x: auto;
-		scrollbar-width: none;
+		flex: 1 1 calc(100% - 60px);
+		min-width: 0;
+		flex-wrap: wrap;
+		/* One line of 44px pills, and the 2px either side. */
+		max-height: 48px;
+		/* guardrails-ignore no-raw-overflow: task 2424 — a CLIP, not a scroller; the folded lines wait behind the toggle above. */
+		overflow: clip;
 		padding-block: 2px;
 	}
+	.cbgd-watch-actions.is-open {
+		max-height: none;
+	}
 	.cbgd-watch-actions > * {
 		flex: none;
 	}
+	.cbgd-watch-actions > [data-cbgd-folded] {
+		visibility: hidden;
+	}
+	/* The way OUT leads the row, where a phone's back button always is — never on a folded line. */
+	.cbgd-watch-actions > .cbgd-action-lead {
+		order: -1;
+	}
+	.cbgd-actions-more {
+		display: inline-flex;
+		flex: none;
+		align-self: flex-start;
+		padding-block: 2px;
+	}
+}
+
+/*
+ * 🔴 A phone on its SIDE: the picture BESIDE its titlebar, as tall as the gallery's scroller.
+ *
+ * Owner, 2026-10-10, collections on an iPhone: *"landscape view has the scrollable content area
+ * too short."* Landscape is the width of a laptop and the height of a postcard (~340px under
+ * Safari's bars), and the stacked layout spent it on chrome: the resize rail, a titlebar that
+ * wrapped to three rows, and a share of what was left — measured, a 53×30 frame over a band of
+ * buttons, with the files below the fold. Beside each other, the frame takes the scroller's full
+ * height at 16:9, the actions wrap freely in the column it leaves, and the files are one scroll
+ * down in the same scroller. The resize rail goes: there is no height left to drag it into.
+ *
+ * `--cbgd-stage-beside` tells `DenseGalleryDetail`'s fit to measure only the region's padding
+ * (the titlebar is not under the frame here), and `--cbgd-stage-share` is how much of the
+ * scroller the frame may take — all of it, or a little over half when PINNED, so the pinned
+ * stage leaves a band of files to scroll under it.
+ */
+@media (orientation: landscape) and (max-height: 500px) {
+	.cbgd-watch {
+		--cbgd-stage-beside: 1;
+		--cbgd-stage-share: 1;
+		--cbgd-stage-default: 760px;
+	}
+	.cbgd-watch.cbgd-watch-sticky {
+		--cbgd-stage-share: 0.55;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-top {
+		grid-template-columns: 1fr;
+		padding: 6px 10px;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-rail {
+		display: none;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-main {
+		display: grid;
+		grid-template-columns:
+			minmax(0, calc(var(--cbgd-stage-h, var(--cbgd-stage-fit, var(--cbgd-stage-default))) * 16 / 9))
+			minmax(200px, 1fr);
+		gap: 12px;
+		align-items: start;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-player-box {
+		height: var(--cbgd-stage-h, var(--cbgd-stage-fit, var(--cbgd-stage-default)));
+		aspect-ratio: auto;
+		max-width: 100%;
+		max-height: none;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-player > .cbmr-rail {
+		display: none;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-titlebar {
+		align-content: flex-start;
+		padding-top: 0;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-actions {
+		margin-left: 0;
+		flex: 1 1 100%;
+		flex-wrap: wrap;
+		max-height: none;
+		overflow: visible;
+	}
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-actions-more {
+		display: none;
+	}
 }
 
 /* ≥44px touch target on coarse pointers only — mirrors `TAP_TARGET_HEIGHT` from

package/src/react/media-gallery/GalleryTable.tsx

@@ -36,7 +36,7 @@ import type { DragEvent } from 'react';
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { CATEGORY_LABEL } from '../components/FileTypeIcon.js';
 import { useResizeObserver } from '../hooks/useResizeObserver.js';
-import { useCanHover, useScrubPreview } from '../media/HoverScrubVideoThumb.js';
+import { useScrubPreview } from '../media/HoverScrubVideoThumb.js';
 import { releaseVideo, useInView, useSettled } from '../media/previewGate.js';
 import { createdLabel, type MediaCache, ThumbImg, useItemMedia } from './galleryItemMedia.js';
 import { galleryItemCategory } from './mediaGalleryModel.js';
@@ -393,8 +393,7 @@ function SortHeader({
  * tile and is written in Tailwind utilities; this module is deliberately Tailwind-free (see
  * `mediaGallery.css`'s opening paragraph — binary-server's inspector has no Tailwind build, so
  * a Tailwind component here renders unstyled in half the fleet). What the two DO share is the
- * arithmetic: `useScrubPreview` steps the same five offsets and `useCanHover` makes the same
- * coarse-pointer decision, both imported rather than re-derived.
+ * arithmetic: `useScrubPreview` steps the same five offsets, imported rather than re-derived.
  *
  * 🔴 It replaces the poster rather than sitting on top of it, because at 56×40 there is no room
  * for a stack — and it attaches the element only while previewing, so a table of four hundred
@@ -481,14 +480,13 @@ function GalleryTableRow({
    * to preview it."* Before this, neither half was true in table view.
    */
   const [hovering, setHovering] = useState(false);
-  const canHover = useCanHover();
   const previewSrc = category === 'video' ? (media.streamUrl ?? media.url) : undefined;
-  // `autoPreview` is suppressed on a coarse pointer exactly as the grid tile suppresses it, so
-  // a phone never opens forty video connections under a finger. A deliberate hover still does.
-  // 🔴 And it waits until the row is on screen and has SETTLED there (`previewGate.ts`), the
-  // same gate the grid tile uses — a table scrolled past fast must not open a stream per row.
+  // `autoPreview` runs on a touch screen too, exactly as the grid tile's does (2026-10-10: the
+  // phone's "Preview all" lit up and nothing moved — `HoverScrubVideoThumb`'s `autoPlay` note).
+  // 🔴 It waits until the row is on screen and has SETTLED there (`previewGate.ts`), the same
+  // gate the grid tile uses — a table scrolled past fast must not open a stream per row.
   const thumbRef = useRef<HTMLButtonElement | null>(null);
-  const autoReady = useSettled(useInView(thumbRef, previewSrc != null && autoPreview && canHover));
+  const autoReady = useSettled(useInView(thumbRef, previewSrc != null && autoPreview));
   const previewing = previewSrc != null && (autoReady || hovering);
 
   return (

package/src/react/media-gallery/MediaGallery.tsx

@@ -86,7 +86,7 @@ import {
   type SourceFault,
   sourceFaultMessage,
 } from '../media/sourceFault.js';
-import { HoverScrubVideoThumb } from '../media/HoverScrubVideoThumb.js';
+import { HoverScrubVideoThumb, useCanHover } from '../media/HoverScrubVideoThumb.js';
 import { isPlayPauseSpace } from '../media/playerSpaceKey.js';
 import {
   LIGHT_RANGE,
@@ -582,6 +582,15 @@ function TileShell({
 }) {
   const selected = selection?.selected === true;
   const quiet = selection !== undefined && !selection.armed;
+  /*
+   * 🔴 Draggable only where a pointer can HOVER. On iOS a press-and-hold on a draggable
+   * element lifts it for drag-and-drop, and a press-and-hold on a tile is the video PREVIEW
+   * there (owner, 2026-10-10: *"holding down on a thumbnail should make it start previewing the
+   * video"* — `HoverScrubVideoThumb`'s `held`). A phone has nowhere to drop a tile anyway: the
+   * folder tree is a closed drawer while the grid is on screen.
+   */
+  const canHover = useCanHover();
+  const dragHere = canHover ? drag : undefined;
   return (
     <div
       className={`cbmg-selectable${selected ? ' is-selected' : ''}${stageMark ? ' is-playing' : ''}${quiet ? ' cbmg-selectable--quiet' : ''}`}
@@ -595,11 +604,11 @@ function TileShell({
       // a drag, some treat the pointer-down as a press and never fire dragstart at all.
       // Dragging the wrapper also means the drag image is the whole tile, which is what a
       // person is aiming at.
-      {...(drag
+      {...(dragHere
         ? {
             draggable: true,
-            onDragStart: (event: DragEvent<HTMLDivElement>) => drag.onDragStart(event),
-            onDragEnd: () => drag.onDragEnd?.(),
+            onDragStart: (event: DragEvent<HTMLDivElement>) => dragHere.onDragStart(event),
+            onDragEnd: () => dragHere.onDragEnd?.(),
           }
         : {})}
     >
@@ -796,8 +805,8 @@ function RawGalleryTile({
         video={video}
         onOpen={onOpen}
         previewMode='scrub'
-        // The whole grid previewing at once, on request. The tile suppresses it on
-        // coarse-pointer devices by itself, so a phone never plays ninety clips under a thumb.
+        // The whole grid previewing at once, on request — on a phone too; the tile's gate keeps
+        // it to the tiles on screen.
         autoPlay={autoPreview ?? false}
         // A stored turn turns the TILE too — otherwise the grid is a wall of sideways films
         // whose detail view is upright, which reads as the fix not having worked.
@@ -3224,7 +3233,9 @@ export function MediaGallery({
                 // guardrails-ignore no-raw-action-button: back-to-grid navigation, styled by
                 // the dense gallery's own plain CSS (plugin-media-gallery precedent).
                 type='button'
-                className={cn(RAW_BUTTON, 'cbgd-order-btn is-icon')}
+                // `cbgd-action-lead`: on a phone it leads the row (`denseGallery.css`), so the way
+                // out is never on a folded line.
+                className={cn(RAW_BUTTON, 'cbgd-order-btn is-icon cbgd-action-lead')}
                 aria-label='Back to grid'
                 onClick={() => select(null)}
               >