Skip to content

The sing beat, and a page a phone can actually use - #7

Merged
codewithwan merged 1 commit into
mainfrom
fix/web-sing-mobile
Jul 16, 2026
Merged

The sing beat, and a page a phone can actually use#7
codewithwan merged 1 commit into
mainfrom
fix/web-sing-mobile

Conversation

@codewithwan

Copy link
Copy Markdown
Owner

Two bugs, both found by using the thing rather than by any test I'd written.

The lyrics never appeared

rasterize picks the karaoke line or the caption strip, never both — and
the karaoke line is half the size and sits up at his shoulder, not under the
ground. The preview drew the song's intro, in the caption strip, at caption
size, forever. So the three lines somebody had just typed were never once on
screen.

Ported properly: same scale, same place, same 30-tick cycle, and the strip
stays empty like it does in the file. Checked against a real render:

tick lyric band caption strip
560 1364 px 0
600 2020 px 0 (a different line — it cycles)
640 0 2808 px (past the beat)

Identical, both bands, all four ticks.

Drag did nothing on a phone

A finger starting on the handle can't be told apart from a scroll until it has
already moved — and by then the page has gone, so the gesture never reached
dnd-kit. touch-action: none on the handle, plus a touch sensor that waits
180ms: hold then drag, move first and it scrolls, which is what a finger on a
long page usually wants. The handle got bigger too; 8px of tap target is a joke
on glass.

Keyboard sensor while I was in there. A list you can only reorder by dragging
is a list some people can't reorder.

And the page was 15px wider than the phone

Grid and flex children are min-width: auto, so they refuse to shrink below
their content — and the canvas carries an intrinsic 1056px however hard
w-full argues. min-w-0 where it matters. Zero overflow on all three steps
now, measured, not eyeballed.

The lyrics never appeared. rasterize picks the karaoke line *or* the caption
strip, never both, and the karaoke line is half the size and sits up at his
shoulder rather than under the ground. The preview drew the song's intro, in
the caption strip, at caption size, forever — so the three lines somebody had
just typed were never once on screen. Ported properly: same scale, same place,
same 30-tick cycle, and the strip stays empty like it does in the file.
Verified against a real render at four ticks — identical, both bands.

Drag did nothing on a phone. A finger starting on the handle can't be told
apart from a scroll until it has already moved, and by then the page has gone,
so the gesture never reached dnd-kit: touch-action: none on the handle, and a
touch sensor that waits 180ms. Hold then drag; move first and it scrolls, which
is what a finger on a long page usually wants. The handle also got bigger,
because 8px of tap target is a joke on glass. Keyboard sensor too — a list you
can only reorder by dragging is a list some people can't reorder.

And the page was 15px wider than the phone. Grid and flex children are
min-width:auto, so they refuse to shrink under their content, and the canvas
carries an intrinsic 1056px however hard w-full argues. min-w-0 where it
matters: zero overflow on all three steps now.
@codewithwan
codewithwan merged commit 6861cf0 into main Jul 16, 2026
10 checks passed
@codewithwan
codewithwan deleted the fix/web-sing-mobile branch July 16, 2026 16:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant