P1-5 fix: 390px containment — consensus rows stack, pitcher line wraps

Phone audit: CONSENSUS VS MODEL bled off the right edge ('2 BO…', 'MO…') and
STARTING-pitcher lines truncated ('2.64 E…'). The M4 lock only hid the DOCUMENT
scroll (html/body overflow-x) — content still clipped inside cards. Now contained:
- .breadth-row stacks (flex-direction:column) at <430px, each field on its own
  line with overflow-wrap:anywhere — no bleed.
- the game-card starting-pitcher inner spans wrap + shrink (flexWrap + minWidth:0)
  so name/ERA/archetype flow onto a second line instead of clipping.
- STRENGTHENED the lock: vyndrParityQA now asserts the CONTAINMENT patterns
  (breadth-row stacks, pitcher spans wrap), not just document overflow.

MLB stat pills: the game-lines grid already scrolls-within-card (<640 M1); if
the audit still shows pill clipping elsewhere, it's a follow-up targeted pass.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/src/app/globals.css

@@ -1372,6 +1372,20 @@ html[data-font="readable"] .wm::after { opacity: 0.45 !important; }
 }
 
 
+
+/* P1-5 — 390px CONTAINMENT: dense data rows must WRAP/STACK inside their card,
+   never bleed off the right edge (the M4 no-overflow lock only hid the document
+   scroll; content still clipped). */
+@media (max-width: 430px) {
+  /* CONSENSUS VS MODEL rows stack — player / consensus / model each own line. */
+  .breadth-row { flex-direction: column; align-items: flex-start; gap: 3px; }
+  .breadth-row > span { min-width: 0 !important; max-width: 100%; overflow-wrap: anywhere; }
+}
+@media (max-width: 767px) {
+  /* opt-in scroll-within-card for wide tables (pitcher lines / pill rows). */
+  .mobile-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
+}
+
 /* P0-4 — MOBILE APP BAR: collapse the 3-row header (nav + ticker + heartbeat)
    to ONE line <768px. The ticker row + the whole heartbeat bar are hidden; the
    nav's right cluster shows the app-bar clock (nav-mobile-clock). main's top

web/src/components/vyndr/GameCard.tsx

@@ -263,12 +263,12 @@ export default function GameCard({ game: g, onAddParlay, onOpen, preferredBooks
       {g.pitchers && (
         <div className="mono" style={{ padding: '0 16px 11px', fontSize: 11, color: 'var(--text-1)', display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
           <span style={{ color: 'var(--text-2)', letterSpacing: '0.04em' }}>STARTING</span>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6' }}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6', flexWrap: 'wrap', minWidth: 0 }}>
             {g.pitchers.away.name} <span style={{ color: 'var(--text-1)' }}>{g.pitchers.away.era} ERA</span>
             {g.pitchers.away.archetype && <ArchetypeBadge archetype={g.pitchers.away.archetype} size="sm" />}
           </span>
           <span style={{ color: 'var(--text-2)' }}>vs</span>
-          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6' }}>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: '#C8CCD6', flexWrap: 'wrap', minWidth: 0 }}>
             {g.pitchers.home.name} <span style={{ color: 'var(--text-1)' }}>{g.pitchers.home.era} ERA</span>
             {g.pitchers.home.archetype && <ArchetypeBadge archetype={g.pitchers.home.archetype} size="sm" />}
           </span>

web/src/components/vyndr/MarketBreadth.tsx

@@ -87,8 +87,8 @@ export default function MarketBreadth({
           return (
             <div
               key={`${r.player}-${r.stat}-${i}`}
-              className="mono"
-              style={{ display: 'flex', alignItems: 'baseline', gap: 10, fontSize: 12, flexWrap: 'wrap', fontVariantNumeric: 'tabular-nums' }}
+              className="mono breadth-row"
+              style={{ display: 'flex', alignItems: 'baseline', gap: 10, fontSize: 12, flexWrap: 'wrap', fontVariantNumeric: 'tabular-nums', minWidth: 0 }}
             >
               {r.player && <span style={{ color: 'var(--text-0)', fontWeight: 700, minWidth: 96 }}>{r.player}</span>}
               <span style={{ color: 'var(--text-1)' }}>