The shell stops deciding how wide a demo's play surface is

PlayYourself capped every demo at the width Wordle needed, so Alert Triage's
analyst screen — tables of transactions and a KYC file — ran in half the page.
The ceiling is now generous and each demo caps itself: wordle's keyboard carries
its own max width, because unconstrained its flex rows stretch to the page and
the keys drift a screen away from the board. Alert Triage 448px -> 896px;
Wordle's keyboard unchanged at 448px.

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

src/components/demo/PlayYourself.tsx

@@ -44,10 +44,12 @@ export function PlayYourself<TState>({
   const Controls = interactive.Controls;
 
   return (
-    // Capped, not full-bleed. The keyboard is a grid of flex rows, so an
+    // The SHELL does not decide how wide a demo's play surface is. A word grid
-    // unconstrained parent stretches it to the page width and the keys drift
+    // wants a narrow column with its keyboard beside it; an analyst screen full
-    // far from the board they belong to.
+    // of tables wants most of the page. So this is a generous ceiling and each
-    <div className={cn('w-full max-w-md space-y-3', className)}>
+    // demo's Surface and Controls cap themselves — wordle's keyboard carries
+    // its own max width for exactly that reason.
+    <div className={cn('w-full max-w-4xl space-y-3', className)}>
       <div className="flex items-baseline justify-between gap-3">
         <h3 className={st.h3}>Your attempt</h3>
         <button

src/demos/wordle/keyboard.tsx

@@ -83,7 +83,9 @@ export function Keyboard({
   const hint = solver.state;
 
   return (
-    <div className="grid gap-1 sm:gap-1.5" style={{ paddingBottom: 'max(0px, var(--safe-bottom))' }}>
+    // Own cap, not the shell's. Unconstrained, these flex rows stretch to the
+    // page and the keys drift a screen away from the board they belong to.
+    <div className="grid w-full max-w-md gap-1 sm:gap-1.5" style={{ paddingBottom: 'max(0px, var(--safe-bottom))' }}>
       {/* The solver, live, on whatever word you picked — not a recording. This
           is the difference between a demo and a video: it answers for boards no
           rollout on this site ever covered. */}