cursedbelt 5.34.0 → 5.34.1

package/dist/react/media/denseGallery.css

@@ -696,6 +696,52 @@
 	.cbgd-related {
 		padding: 0 8px 8px;
 	}
+	/*
+	 * 🔴 On a phone the stage is sized by its WIDTH, not by the container's height.
+	 *
+	 * Owner, 2026-09-30, collections on an iPhone: *"a big gap for the video playing which
+	 * doesn't look like it is fit correctly. Under that there is another big gap before you see
+	 * the media files"*. Portrait, the column is ~340px wide and the measured fit
+	 * (`--cbgd-stage-fit`, a share of the container's HEIGHT) came out taller than a 16:9 picture
+	 * of that width — so a video letterboxed inside a near-square black box. Here the frame
+	 * defaults to the full width at 16:9, which is what every phone video app draws, and it is
+	 * still ONE constant box, so stepping between files moves nothing (the 2026-08-23 rule above).
+	 *
+	 * A height the person DRAGGED (or a consumer's `stageHeight`) still wins — `--cbgd-stage-h`
+	 * is the height when it is set, and `aspect-ratio` only answers an `auto` one. The resize
+	 * grips are the owner's own ask (2026-08-25) and a portrait video is exactly what one drags
+	 * taller. Not in full-stage mode, which fills the whole container on purpose.
+	 */
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-player-box {
+		height: var(--cbgd-stage-h, auto);
+		aspect-ratio: 16 / 9;
+		max-width: 100%;
+		max-height: 70dvh;
+	}
+	/* The rail under the frame is the second gap: 84px under a coarse pointer. 52px is the
+	   touch bar's own reach (22px + 15px either side, `mediaResize.css`), so both grips stay
+	   over the 44px tap floor and inside the rail (`e2e/touch-targets.spec.ts`) and the rest is
+	   given back. Its width follows the frame's, which is the column's here, not the 16:9 cap's. */
+	.cbgd-watch {
+		--cbmr-corner-size: 52px;
+	}
+	.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. */
+	.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;
+		padding-block: 2px;
+	}
+	.cbgd-watch-actions > * {
+		flex: none;
+	}
 }
 
 /* ≥44px touch target on coarse pointers only — mirrors `TAP_TARGET_HEIGHT` from

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cursedbelt",
-	"version": "5.34.0",
+	"version": "5.34.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/scripts/guardrails-baseline.json

@@ -19,7 +19,7 @@
     "no-hand-rolled-scroll-memory": 0,
     "no-hand-rolled-surface": 0,
     "no-inline-style": 76,
-    "opt-out-count": 269,
+    "opt-out-count": 270,
     "opt-out-needs-cause": 258
   },
   "cursedshell": {

package/src/react/media/denseGallery.css

@@ -696,6 +696,52 @@
 	.cbgd-related {
 		padding: 0 8px 8px;
 	}
+	/*
+	 * 🔴 On a phone the stage is sized by its WIDTH, not by the container's height.
+	 *
+	 * Owner, 2026-09-30, collections on an iPhone: *"a big gap for the video playing which
+	 * doesn't look like it is fit correctly. Under that there is another big gap before you see
+	 * the media files"*. Portrait, the column is ~340px wide and the measured fit
+	 * (`--cbgd-stage-fit`, a share of the container's HEIGHT) came out taller than a 16:9 picture
+	 * of that width — so a video letterboxed inside a near-square black box. Here the frame
+	 * defaults to the full width at 16:9, which is what every phone video app draws, and it is
+	 * still ONE constant box, so stepping between files moves nothing (the 2026-08-23 rule above).
+	 *
+	 * A height the person DRAGGED (or a consumer's `stageHeight`) still wins — `--cbgd-stage-h`
+	 * is the height when it is set, and `aspect-ratio` only answers an `auto` one. The resize
+	 * grips are the owner's own ask (2026-08-25) and a portrait video is exactly what one drags
+	 * taller. Not in full-stage mode, which fills the whole container on purpose.
+	 */
+	.cbgd-watch:not(.cbgd-watch-full) .cbgd-watch-player-box {
+		height: var(--cbgd-stage-h, auto);
+		aspect-ratio: 16 / 9;
+		max-width: 100%;
+		max-height: 70dvh;
+	}
+	/* The rail under the frame is the second gap: 84px under a coarse pointer. 52px is the
+	   touch bar's own reach (22px + 15px either side, `mediaResize.css`), so both grips stay
+	   over the 44px tap floor and inside the rail (`e2e/touch-targets.spec.ts`) and the rest is
+	   given back. Its width follows the frame's, which is the column's here, not the 16:9 cap's. */
+	.cbgd-watch {
+		--cbmr-corner-size: 52px;
+	}
+	.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. */
+	.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;
+		padding-block: 2px;
+	}
+	.cbgd-watch-actions > * {
+		flex: none;
+	}
 }
 
 /* ≥44px touch target on coarse pointers only — mirrors `TAP_TARGET_HEIGHT` from