VersionControl:PRs/magenta/440

magenta#440: On a phone, a message's heading line drops below ▶ ⏩ instead of squeezing between them

State	🟣 merged 2026-11-09 22:20:56
Worked on by	magent, skyler
Moods	#uploads-and-embeds
Deploy	redeploy maybelle (one redeploy covers #438, #439 and this)
Branch	magent/phone-header-wrap → main, by magent-cryptograss
Opened · last pushed	2026-11-08 19:16:57 · 2026-11-08 19:16:46

On Skyler's iPhone, an agent's short message had its heading line (🔨, time, model badge, ↩ 🙂 ⋯) squeezed into a column one word wide. It sat between the floated ▶ ⏩ on the left and the folded "N tool calls" on the right, and ⏩ sat on top of it.

**Change** (in the `@media (pointer: coarse)` block of `moods.html`):
- `.turn .who` wraps between its parts and needs at least 60% of the width. With less room than that beside the floats, it drops below them.
- Each part keeps its own words on one line: "Nov 8, 07:11 PM" stays together.
- The floated ↩ 🙂 ⋯ on the first message of an agent's run is also a `.who`, so it gets `min-width: 0` and stays small.

**Checked:** in Chromium on production's page, set up as a touch screen 402 px wide. The page was signed out, so I added the signed-in ▶ ⏩ ↩ 🙂 ⋯ markup the way `moods.html` places it, then injected these rules:
- Before: the heading lines were squeezed, as in Skyler's screenshot.
- After: across 13 headings, none overlaps a float and none is narrower than 120 px. The page stays 402 px wide.

New test `test_phone_header_wraps` (2 cases) passes. Not checked on a real iPhone.

Deploy: redeploy maybelle (one redeploy covers #438, #439 and this)
Worked on by: magent and Skyler, in #uploads-and-embeds