The same trap, a third time

A report that the word display was overflowing past the screen edge on Daily and AI Duel, at a narrow viewport, turned out not to be one bug. WordInput.svelte, the Daily display, had simply never received the shrink-to-fit treatment DuelWordPanel already had from the follow-the-action panel work: measure the row, scale the font down until a long word fits on one line. Porting it in also meant extracting the measurement math the duel panel already owned into a shared file, so both components now run the same implementation instead of two copies drifting apart.

The second cause had nothing to do with word length at all. It reproduced at a 320px viewport with zero letters typed, identically across Daily, AI Duel, and PvP, which is exactly why the original report named two separate modes for what looked like one bug. The on-screen keyboard’s key buttons sat inside a flex row and had never been told they were allowed to shrink below their own content width:

.key {
  flex: 1;
  min-width: 0;
  /* ...unchanged... */
}

One property. The same fix had to repeat on the surrounding grid items too, since a CSS grid track has the identical min-content floor a flex item does.

Extending the PvP regression test to the same 320px width, to check the keyboard fix held there too, surfaced a third case of the same trap: the stat bar’s score and lives widgets, white-space: nowrap text with no min-width: 0 of their own, worst on PvP where two lives widgets sit next to both scores. It got folded into the same pull request as a second commit rather than filed and picked up later.

Three unrelated components have now hit this exact shape, a flex or grid item holding non-wrapping content with no min-width: 0 override, each confirmed the same way: stash the fix, watch the regression test fail, restore it, watch the test pass. The threshold that catches it is 320px; 390px, the more commonly tested narrow width, usually doesn’t.