Size the play column so the board and keyboard read as one object

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/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