Building in the Open: Fixing the Toolbar on Mobile

It’s time to clean up - one thing I’ve wanted was that the drawing toolbar can collapse on a phone (hamburger only), and snap to an edge so rotate doesn’t lose it, and nudge back on-screen if expanding would clip. Quality of life type stuff here.

My original prompt was precisely:

Web client.  There are two overlays, one is red when recording and contains the users name.  The other is the main controls. 
1. When a double-tap the main controls (contains drawing tools); I want that toolbar to collapse, showing ONLY the hamburger icon (left most).
ANYTIME when I move the toolbar via the hamburger icon, I want it to "snap to the edge"; such that if I rotate the phone, that toolbar always stays locked onto the edge.  
IF I expand the toolbar, and its expansion would cause any part of that toolbar to be off the screen and or not visible, nudge the toolbar into position so that its always visible.
all this work will go into branch feature/mobile-life-improvement

Cursor went and did it’s thing… eager to please, it finished some bunch of seconds later - with no questions asked.

Then I ran /grill-with-docs on the generated cursor plan. Twelve questions. Most of them I had not really thought about (um, like, not at all). Halfway through the whole plan, I switched to single tap instead of double tap.

Grilling phase asked me:

  • What are the two Viewer surfaces actually called? (not “overlay”)
  • May a phone snap sit in the same top strip as the Viewer status bar?
  • Where does always-snap apply?
  • How do we tell phone from desktop?
  • How far is “near” for desktop magnetic snap?
  • If the window crosses 768px without a new drag, does the toolbar jump to an edge?
  • Is collapsed remembered after refresh / rejoin?
  • How does a collapsed hamburger expand?
  • Does that tap toggle both ways, or only expand?
  • On rotate, keep along-edge as pixels or as a fraction?
  • Have we reached a shared understanding?
  • ADR, or just lock the names into CONTEXT.md?

And for every single question; I had an interesting multichoice answer - it’s recommendations were good enough in this case.

That is the skill. It catches the stuff you skip — then locks it in so you don’t skip it twice.

I ran this with Grok 4.6, on slow-mode, 10 minutes later tested the feature on a couple of phones and an Apple tablet - all good so far! I’m off to find a larger tablet and test that too - have fun!