Let a long state chip wrap instead of running off the phone

A change chip like "bandit leader aggression +10" was nowrap inside the
story column, which has nothing to scroll, so it overran narrow screens.
The label may now break as a last resort while the value stays glued
together, and the analytics range buttons wrap onto a second row.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01DfMCsN1KBLsTqMkj5hSgrY

frontend/src/index.css

@@ -1161,8 +1161,15 @@ button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: n
   background: var(--bg-input);
   color: var(--text-dim);
   font-variant-numeric: tabular-nums;
-  white-space: nowrap;
+  /* A chip must never be wider than the column it sits in: an NPC stat like
+     "bandit leader aggression +10" overruns a phone, and the chip row is
+     inside the story text, which has nothing to scroll. The label may break
+     mid-word as a last resort; the value is glued to it by its own nowrap so
+     the sign and number never end up on separate lines. */
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
+.chg-val { white-space: nowrap; }
 .chg-up { color: var(--player, #4caf82); border-color: color-mix(in srgb, var(--player, #4caf82) 40%, var(--border)); }
 .chg-down { color: var(--danger, #e5484d); border-color: color-mix(in srgb, var(--danger, #e5484d) 40%, var(--border)); }
 .chg-flag { color: var(--accent-bright); }
@@ -2345,7 +2352,7 @@ button.primary.compact { padding: 3px 12px; font-size: 0.76rem; margin-left: aut
 /* Wider than the reading pages: this one is a grid of small figures, not
    prose, and 960px puts two charts and eight tiles into a column. */
 .an-page { max-width: 1180px; }
-.an-ranges { display: flex; gap: 6px; }
+.an-ranges { display: flex; flex-wrap: wrap; gap: 6px; }
 
 /* Four across, not auto-fit: there are eight tiles, and letting them flow
    leaves a single orphan on the second row at most widths. */

frontend/src/pages/Play.jsx

@@ -1213,7 +1213,7 @@ function StateChangeChips({ changes }) {
     <div className="turn-changes">
       {changes.map((c, i) => {
         if (c.kind === 'flag') {
-          return <span key={i} className="chg chg-flag">{nice(c.label)}: {c.on ? 'on' : 'off'}</span>
+          return <span key={i} className="chg chg-flag">{nice(c.label)}: <span className="chg-val">{c.on ? 'on' : 'off'}</span></span>
         }
         if (c.kind === 'milestone') {
           return <span key={i} className="chg chg-ms">✓ {nice(c.label)}</span>
@@ -1221,7 +1221,11 @@ function StateChangeChips({ changes }) {
         const d = c.delta
         const dir = typeof d === 'number' ? (d > 0 ? 'up' : d < 0 ? 'down' : 'flat') : 'flat'
         const txt = typeof d === 'number' ? (d > 0 ? `+${d}` : `${d}`) : `→ ${c.value}`
-        return <span key={i} className={`chg chg-stat chg-${dir}`}>{nice(c.label)} {txt}</span>
+        return (
+          <span key={i} className={`chg chg-stat chg-${dir}`}>
+            {nice(c.label)} <span className="chg-val">{txt}</span>
+          </span>
+        )
       })}
     </div>
   )