cursedbelt 5.74.0 → 5.74.1

package/dist/react/media-gallery/playbackPreferences.js

@@ -176,8 +176,8 @@ const THUMB_AUTOPLAY_KEY = 'cbmg:thumb-autoplay';
  * a toggle, which is a thing you turn on; a default-on preview is a thing you have to
  * discover in order to turn off.
  *
- * {@link HoverScrubVideoThumb} independently suppresses it on coarse-pointer devices, so a
- * phone never has ninety clips playing under the reader's thumb even with this on.
+ * On a phone it previews too (2026-10-10 — a pressed "Preview all" that moved nothing was the
+ * bug), and {@link HoverScrubVideoThumb}'s on-screen gate keeps it to the tiles in view.
  */
 export function readThumbAutoplay() {
     try {

package/dist/styles-areas/core.css

@@ -15,7 +15,7 @@
  * after an app's responsive variant (task 2124). An app that imports every area gets exactly
  * what `cursedbelt/styles-utilities.css` emits — proved rule by rule in
  * src/stylesAreas.spec.ts, which is also what fails when this file is stale.
- * 920 candidate(s).
+ * 922 candidate(s).
  *
  * Written by scripts/generateAreaStyles.ts (`bun run styles:areas`), which
  * `bun run build` runs. The map of what is in which area, and why the areas are
@@ -38,11 +38,13 @@
 @source inline("[&_[data-icon]]:text-accent [&_[data-icon]]:text-destructive [&_[data-icon]]:text-success");
 @source inline("[&_[data-icon]]:text-warning [&_sup]:leading-none [&_svg]:shrink-0 [&_svg]:size-12");
 @source inline("[&_svg]:size-4 [&_svg]:size-5 [&_svg]:size-6 [--cbfk-sticky-top:-1rem]");
-@source inline("[-webkit-touch-callout:none] a absolute act active active:bg-accent active:scale-100");
-@source inline("active:scale-[var(--press-scale)] active:scale-[var(--press-scale-surface)] alert alert-icon");
-@source inline("align align-middle an animate animate-in animate-progress-indeterminate animate-pulse");
-@source inline("animate-spin aria aria-[invalid=true]:border-field-error aria-[invalid=true]:ring-field-error/30");
-@source inline("aria-disabled aria-disabled:active:scale-100 aria-disabled:cursor-not-allowed");
+@source inline("[-webkit-touch-callout:none] [@media(orientation:landscape)_and_(max-height:500px)]:py-1.5");
+@source inline("[@media(orientation:landscape)_and_(max-height:500px)]:text-h3 a absolute act active");
+@source inline("active:bg-accent active:scale-100 active:scale-[var(--press-scale)]");
+@source inline("active:scale-[var(--press-scale-surface)] alert alert-icon align align-middle an animate");
+@source inline("animate-in animate-progress-indeterminate animate-pulse animate-spin aria");
+@source inline("aria-[invalid=true]:border-field-error aria-[invalid=true]:ring-field-error/30 aria-disabled");
+@source inline("aria-disabled:active:scale-100 aria-disabled:cursor-not-allowed");
 @source inline("aria-disabled:hover:bg-transparent aria-disabled:opacity-30 aria-disabled:opacity-50");
 @source inline("aria-disabled:pointer-events-none aria-pressed aria-pressed:bg-accent/10 aria-pressed:border");
 @source inline("aria-pressed:border-accent aria-pressed:text-accent auto auto-cols-[minmax(min-content,1fr)] b");

package/dist/styles-utilities.css

@@ -5451,6 +5451,14 @@
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
   }
+  @media (orientation:landscape) and (max-height:500px) {
+    .\[\@media\(orientation\:landscape\)_and_\(max-height\:500px\)\]\:py-1\.5 {
+      padding-block: calc(var(--spacing) * 1.5);
+    }
+    .\[\@media\(orientation\:landscape\)_and_\(max-height\:500px\)\]\:text-h3 {
+      font-size: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
+    }
+  }
 }
 @property --tw-translate-x {
   syntax: "*";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.74.0",
+	"version": "5.74.1",
 	"license": "ISC",
 	"type": "module",
 	"description": "The React design system of the cursedbelt split — components, styles, theme. cursedbelt-core below it; server tier in cursedbelt-server.",

package/src/react/components/Page.tsx

@@ -130,6 +130,11 @@ export interface PageHeaderProps {
   className?: string;
 }
 
+/** Under a phone held sideways (`orientation: landscape` and at most 500px tall) — literal
+ *  class strings, because Tailwind's scanner reads them out of the source. */
+const SHORT_LANDSCAPE_PAD = '[@media(orientation:landscape)_and_(max-height:500px)]:py-1.5';
+const SHORT_LANDSCAPE_TITLE = '[@media(orientation:landscape)_and_(max-height:500px)]:text-h3';
+
 /**
  * The page title row: an `<h1>` (fluid `text-h1`) + optional subtitle, with metric
  * pills (`meta`) beside the title and optional actions pushed to the trailing edge.
@@ -157,6 +162,11 @@ export function PageHeader({
         // pushing off-viewport (phone-overflow bug class).
         'flex-wrap gap-y-2 border-b border-border',
         dense ? 'px-0 py-2' : inContainer ? 'px-0 pb-4' : 'px-4 py-4 sm:px-6 lg:px-8',
+        // 🔴 A phone on its side is ~340px tall under Safari's bars, and a roomy page header
+        // took a quarter of it. Owner, 2026-10-10, collections on an iPhone: *"landscape view
+        // has the scrollable content area too short … the outer rows should be much shorter."*
+        // One tight line there: the same title, at h3 scale (below).
+        !dense && SHORT_LANDSCAPE_PAD,
         sticky && 'sticky top-0 z-20 bg-background/90 backdrop-blur-md',
         className,
       )}
@@ -166,7 +176,7 @@ export function PageHeader({
           <Heading
             className={cn(
               'font-bold tracking-tight text-foreground',
-              dense ? 'text-h3' : 'text-h1',
+              dense ? 'text-h3' : cn('text-h1', SHORT_LANDSCAPE_TITLE),
               !titleOnMobile && 'hidden sm:block',
             )}
           >

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