Size the action editor to its content; widen both composers on mobile

Editing a beat opened a fixed 110px box. Player actions are one line, but AI
beats are several paragraphs, so editing one meant working through a keyhole.
New AutoTextarea sizes to its content on mount and on every change; CSS keeps a
110px floor so a short player action doesn't collapse, and a 65vh ceiling that
scrolls internally so Save/Cancel can't be pushed off the screen.

On phones both composers are one flex row, which left almost nothing to type
into: measured at a 390px composer, the Play textarea got 138px (Do/Say/Story
eat ~180px, Send ~75px) and the chat textarea 310px. Both now wrap, with the
buttons on their own line and the textarea taking the full 390px — Play keeps
Do/Say/Story and Send together on the top row, chat drops Send beneath. Play
stays two rows, so nothing gets taller. Desktop is unchanged; every rule is
inside the existing max-width:720px block.

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

frontend/src/pages/Play.jsx

@@ -1,7 +1,7 @@
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { api } from '../api'
-import { Field, StoryCardRow, downloadJSON, pickJSONFile, useToast } from '../components'
+import { AutoTextarea, Field, StoryCardRow, downloadJSON, pickJSONFile, useToast } from '../components'
 
 const MODES = ['do', 'say', 'story']
 const PLAYER_TYPES = ['do', 'say', 'story']
@@ -156,7 +156,7 @@ function MemoryRow({ memory, onChange, onDelete }) {
     <div className={`memory-row ${memory.forgotten ? 'forgotten' : ''}`}>
       {editText !== null ? (
         <div className="action-edit" style={{ margin: 0 }}>
-          <textarea autoFocus value={editText} rows={3}
+          <AutoTextarea autoFocus value={editText} rows={3}
             onChange={(e) => setEditText(e.target.value)} />
           <div className="edit-buttons">
             <button className="primary" onClick={save}>Save</button>
@@ -1178,7 +1178,7 @@ export default function Play() {
 
             return editing?.id === action.id ? (
               <div key={action.id} className="action-edit">
-                <textarea
+                <AutoTextarea
                   autoFocus
                   value={editing.text}
                   onChange={(e) => setEditing({ ...editing, text: e.target.value })}