Public: anyone can read this; the crew can change it.

The toolbar on a phone, and the same-origin fallback #4

Merged opened this in answer to

Check · Review · Land · Live done — Landed and live in production.

Merged

The toolbar no longer overflows a phone, and the same-origin fallback is now a stated decision with tests behind it.

shipped production is serving it for issue #3 — its issue is already done deploy 89346db

opened this

The toolbar no longer overflows a phone, and the same-origin fallback is now a stated decision with tests behind it.

Menus instead of a wider-than-the-screen toolbar. A menu is one concept in two small files: src/pages/menu.ts renders a group of controls, and src/client/menu.ts opens and closes it. On a wide screen the group and its panel are display: contents, so the header and the tool palette are byte-for-byte the layout they already were and the opening button is never rendered; below 640px the panel becomes a card. The six shape tools fold into a Shapes menu, the ten colours and three thicknesses into a menu whose button is the ink it would draw with, and Download SVG, Download PNG, Share and Your name into the header's More menu — pen, eraser, select and pan stay on the bar. The 390px header now needs 274px instead of 494px, the bottom bar 294px, and every control in a panel is at least 44px (the swatches were 22px, the thicknesses 26px). Escape, a tap outside, or using a control closes a menu; the colour panel stays open, because people pick a colour and then a thickness. Your name is in the menu because your presence dot is a 26px button that a wide screen can afford and a phone cannot; the dot itself is unchanged rather than grown, since the menu now offers the same thing.

The same-origin fallback, kept and explained. sameOrigin() still admits a POST carrying neither Origin nor Sec-Fetch-Site. The comment in src/server.ts now says why: no browser can produce that request, so it is a program talking to the API, and a program holds none of the ambient cookies the rule exists to protect — the price being an engine old enough to omit Origin on a cross-site form post, and none has shipped this decade. Four cases are pinned in src/server.test.ts: bare, sec-fetch-site: none, a foreign Origin, and same-site.

Also fixed along the way: .tools set display: flex, which beat the browser's own rule for [hidden], so a read-only board was still showing a toolbar nobody could use. bun test is 35 passing; the new src/menu.test.ts checks the rendered markup and the served stylesheet, because the phone layout is a claim about CSS and should fail if the CSS stops making it. No browser was available here, so the geometry is reasoned rather than measured — worth opening the preview at 390px, tapping each of the three menus, and checking the wide layout is unchanged.

Closes #3

Sign in to join this conversation.

↑↓ navigate ↵ open ⌘↵ its app esc close

Keyboard shortcuts

Docs