commit 3c3eb5950a3b6a90d75c7d2909ef141cbb5ffac2
parent 839ec457c059cc6b20891b240f076ede3569372d
Author: I Mean I'm Just Saying <imeanimjustsaying@kiwifarms.st>
Date: Sat, 19 Sep 2026 04:23:01 -0400
clip bench: the pane's own controls live in the pane
The hint line and "peek further" were a sibling row after the transcript
pane, so they were one more thing the left column had to find height for.
At 1366x768 the row wrapped and its second line -- the button -- sat under
the rendered-clip strip, half covered, with nothing to report it: the pane
is flex-[2_1_0%] and gives way, so the column never overflowed.
They move inside the pane as a sticky footer. A sibling costs height
whatever it does; a sticky footer inside the scrolling box costs the pane
one of its own lines and the column nothing, and it puts "peek further"
beside the dimmed lines it widens. The wording is what the PANE does --
the rail's "click to snap an edge" belongs to the rail, and is already in
every cue's title.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Diffstat:
2 files changed, 27 insertions(+), 23 deletions(-)
diff --git a/umtool/components/projects/ClipBench.tsx b/umtool/components/projects/ClipBench.tsx
@@ -1464,7 +1464,7 @@ export default function ClipBench({ data }: { data: ClipBenchData }) {
<div
data-transcript=""
ref={transcriptBox}
- className="h-48 min-h-0 overflow-y-auto rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] lg:h-auto lg:flex-[2_1_0%]"
+ className="relative flex h-48 min-h-0 flex-col overflow-y-auto rounded border border-[var(--color-line)] bg-[var(--color-panel-2)] lg:h-auto lg:flex-[2_1_0%]"
>
<ul>
{railCues.map((c, i) => {
@@ -1546,27 +1546,30 @@ export default function ClipBench({ data }: { data: ClipBenchData }) {
);
})}
</ul>
- </div>
- <div className="micro flex flex-wrap items-center gap-2">
- <span>
- what is being said — a marked cue closes a sentence; click one to snap an edge
- </span>
- {peek.length > 0 && (
- <>
- <span className="text-[var(--color-dim)]">
- · dimmed cues are past the cached file — click one to fetch to it
- </span>
- <button
- type="button"
- data-peek-further=""
- className="text-[var(--color-sel)] hover:underline"
- onClick={() => setPeekPad((n) => n + PEEK_STEP)}
- >
- peek further (±{peekPad + PEEK_STEP} s)
- </button>
- </>
- )}
+ {/* ---- the pane's own footer ----
+ The controls that act on this pane live in it, stuck to the
+ bottom of its scrollport: they cost the pane a line and the
+ left column nothing, and "peek further" ends up beside the
+ dimmed lines it widens. Opaque, because it sits over text. */}
+ <div className="micro sticky bottom-0 z-10 flex flex-wrap items-center gap-2 border-t border-[var(--color-line)] bg-[var(--color-panel-2)] px-2 py-0.5">
+ <span>click a line to play it</span>
+ {peek.length > 0 && (
+ <>
+ <span className="text-[var(--color-dim)]">
+ · dimmed lines are not fetched — click to fetch
+ </span>
+ <button
+ type="button"
+ data-peek-further=""
+ className="ml-auto text-[var(--color-sel)] hover:underline"
+ onClick={() => setPeekPad((n) => n + PEEK_STEP)}
+ >
+ peek further (±{peekPad + PEEK_STEP} s)
+ </button>
+ </>
+ )}
+ </div>
</div>
{/* ---- the warnings ----
diff --git a/umtool/docs/clip-bench.md b/umtool/docs/clip-bench.md
@@ -106,8 +106,9 @@ file (one request to `/api/report/cues`, text from the archive and cheap beside
media). Everything outside the cache is dimmed, both cache edges are marked, and
the cached stretch — the part the waveform above is showing — is shaded, so the
two scales cannot be mistaken for one. Clicking a dimmed cue fetches exactly far
-enough to reach it plus two seconds, **on that cue's side only**; "peek further"
-widens the reading by another 60 s without downloading anything.
+enough to reach it plus two seconds, **on that cue's side only**; "peek further",
+in the pane's own sticky footer, widens the reading by another 60 s without
+downloading anything.
## Three things the JSON cannot show you
