Give phones a listening player instead of the shrunken panel

[brsbl]

Human comments

What was wrong

On phones the full 1128 px panel was scaled down to fit, so every control was too small to use. Phones are only meant for listening to loops.

What changed

• Screens under 700 px now show a listening player instead of the panel.
• The player shows the loop's name and tempo, and a read-only step grid that lights up as it plays.
• One big START/STOP key plays the loop; LOOP keys switch between the six patterns.
• A shared link opens in the player and is named "Shared loop" unless it matches a pattern.
• Safari on iPhone now plays even with the silent switch on.
• The nameplate, chrome housing, and pattern list are shared modules used by both layouts.

How you verified

• Remote CI: pending.
• Component tests cover playing, switching loops, shared-loop naming, and the absence of editing controls.
• A Playwright phone test (390×844) covers play, stop, loop switching, no horizontal scroll, and console errors.
• Chrome for Testing at 390×844: no sideways scroll; desktop at 1440×900 still shows the full panel.

Screenshots

Before: 9479cd6 · After: 8079504 · Captured at 2× in Chrome for Testing

Screen / state	Viewport	Before	After
Phone / idle	Mobile · 390×844
Phone / playing	Mobile · 390×844	— (no player before)

BB-Thread-ID: thr_d58s3peww2

🤖 Generated with Claude Code

AGENT GENERATED

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
loop-machine	Ready	Preview	Oct 4, 2026 12:08pm UTC