From 7db56ee3eb4f1f8ab77dcfb9d7d956a96b12aacf Mon Sep 17 00:00:00 2001
From: karti-ai <176560021+karti-ai@users.noreply.github.com>
Date: Fri, 28 Aug 2026 16:46:38 -0700
Subject: [PATCH] Size the play column so the board and keyboard read as one
 object
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The interactive board collapsed to a stub: an empty board has no intrinsic
width, so `w-full` inside a shrink-to-fit card resolved to nothing — and empty
is exactly the state it starts in, so it was only ever seen broken. It now
carries an explicit width.

The keyboard stretched to the full page because its parent was unconstrained,
putting the keys a screen away from the board they belong to. The play column
is capped at 28rem, and the agent's replay moved below its own heading instead
of sitting beside a lone paragraph.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019mt6sHQHEnEYrJZvoMCJSB
---
 src/components/demo/DemoShell.tsx    | 12 ++++++------
 src/components/demo/PlayYourself.tsx |  5 ++++-
 src/demos/wordle/surface.tsx         |  9 ++++++++-
 3 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/components/demo/DemoShell.tsx b/src/components/demo/DemoShell.tsx
index e160da1..befd147 100644
--- a/src/components/demo/DemoShell.tsx
+++ b/src/components/demo/DemoShell.tsx
@@ -353,16 +353,16 @@ function DemoBody({ bundle }: { bundle: DemoBundle }) {
         return (
           <div className="space-y-3">
             {demo.interactive ? (
-              <div className="grid grid-cols-1 gap-6 lg:grid-cols-2 lg:items-start">
+              <>
                 <PlayYourself demo={demo} seed={run.seed} />
-                <div className="space-y-2">
+                <div className="space-y-1 pt-4">
                   <h3 className={st.h3}>What the model did</h3>
-                  <p className={cn(st.prose, 'text-sm')}>
-                    Same hidden answer, same rules, same budget. Its attempt is
-                    below, replayed at the speed it actually happened.
+                  <p className={cn(st.prose, 'max-w-prose text-sm')}>
+                    Same hidden answer, same rules, same budget — replayed at the
+                    speed it actually happened.
                   </p>
                 </div>
-              </div>
+              </>
             ) : null}
 
             {runs.length > 1 ? (
diff --git a/src/components/demo/PlayYourself.tsx b/src/components/demo/PlayYourself.tsx
index 4c2cc1d..213695c 100644
--- a/src/components/demo/PlayYourself.tsx
+++ b/src/components/demo/PlayYourself.tsx
@@ -44,7 +44,10 @@ export function PlayYourself<TState>({
   const Controls = interactive.Controls;
 
   return (
-    <div className={cn('space-y-3', className)}>
+    // 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)}>
       <div className="flex items-baseline justify-between gap-3">
         <h3 className={st.h3}>Your attempt</h3>
         <button
diff --git a/src/demos/wordle/surface.tsx b/src/demos/wordle/surface.tsx
index 0b9a4d2..63f8f10 100644
--- a/src/demos/wordle/surface.tsx
+++ b/src/demos/wordle/surface.tsx
@@ -118,7 +118,14 @@ export const Board = memo(function Board({
 
   return (
     <div
-      className={cn('grid gap-1 sm:gap-1.5', compact ? 'w-full max-w-[7rem]' : 'w-full max-w-sm')}
+      className={cn(
+        'grid gap-1 sm:gap-1.5',
+        // An explicit width, not `w-full max-w-sm`. An empty board has no
+        // intrinsic width, so inside a shrink-to-fit parent `w-full` resolves
+        // to nothing and the board collapses to a stub — which is exactly the
+        // state the interactive board starts in.
+        compact ? 'w-[7rem]' : 'w-[min(100%,20rem)] min-w-[15rem]',
+      )}
       role="img"
       aria-label={
         rows.length === 0