From c075ac57cd939f31cac5179a5a9f103d9b3ba680 Mon Sep 17 00:00:00 2001
From: karti-ai <176560021+karti-ai@users.noreply.github.com>
Date: Fri, 28 Aug 2026 19:50:24 -0700
Subject: [PATCH] The shell stops deciding how wide a demo's play surface is
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 10 ++++++----
 src/demos/wordle/keyboard.tsx        |  4 +++-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/demo/PlayYourself.tsx b/src/components/demo/PlayYourself.tsx
index 213695c..8cf660b 100644
--- a/src/components/demo/PlayYourself.tsx
+++ b/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
-    // unconstrained parent stretches it to the page width and the keys drift
-    // far from the board they belong to.
-    <div className={cn('w-full max-w-md space-y-3', className)}>
+    // The SHELL does not decide how wide a demo's play surface is. A word grid
+    // wants a narrow column with its keyboard beside it; an analyst screen full
+    // of tables wants most of the page. So this is a generous ceiling and each
+    // 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
diff --git a/src/demos/wordle/keyboard.tsx b/src/demos/wordle/keyboard.tsx
index 97bf093..4e04bfe 100644
--- a/src/demos/wordle/keyboard.tsx
+++ b/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. */}