From a170f5aed588c97a69505de9058840e63979d7d7 Mon Sep 17 00:00:00 2001
From: parththakkar106 <f20200088@pilani.bits-pilani.ac.in>
Date: Sun, 26 Jul 2026 20:54:52 +0530
Subject: [PATCH] Size the action editor to its content; widen both composers
 on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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/components.jsx | 19 +++++++++++++++++++
 frontend/src/index.css      | 36 +++++++++++++++++++++++++++++++++---
 frontend/src/pages/Play.jsx |  6 +++---
 3 files changed, 55 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components.jsx b/frontend/src/components.jsx
index cf45b0a..c42b769 100644
--- a/frontend/src/components.jsx
+++ b/frontend/src/components.jsx
@@ -281,6 +281,25 @@ export function AuthModal({ mode: initialMode, onClose, onAuthed }) {
   )
 }
 
+/** A textarea that grows to fit its content instead of sitting at a fixed
+    height. Editing an AI beat means editing a few paragraphs, and a fixed box
+    made that a keyhole. CSS min/max-height still bound it (the cap scrolls),
+    so callers control the floor and ceiling from the stylesheet. */
+export function AutoTextarea({ value, ...props }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    // Reset first: scrollHeight only ever grows while an explicit height is set,
+    // so without this the box could never shrink back down.
+    el.style.height = 'auto'
+    el.style.height = `${el.scrollHeight}px`
+  }, [value])
+
+  return <textarea ref={ref} value={value} {...props} />
+}
+
 export function Field({ label, value, onChange, textarea, rows, placeholder }) {
   return (
     <label className="field">
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 6804aa7..c17b036 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -393,7 +393,18 @@ button:disabled { opacity: 0.45; cursor: default; transform: none; box-shadow: n
 .story .action-tools button:hover { color: var(--text); }
 
 .action-edit { margin-bottom: 14px; }
-.action-edit textarea { min-height: 110px; font-family: inherit; font-size: inherit; }
+/* Sized by AutoTextarea to fit the text being edited — an AI beat is usually
+   several paragraphs, and the old fixed 110px turned that into a keyhole.
+   min-height keeps a short player action from collapsing; max-height stops a
+   very long beat from pushing Save/Cancel off the screen (it scrolls instead).
+   resize stays on, so the height is a starting point, not a cage. */
+.action-edit textarea {
+  min-height: 110px;
+  max-height: 65vh;
+  overflow-y: auto;
+  font-family: inherit;
+  font-size: inherit;
+}
 .action-edit .edit-buttons { display: flex; gap: 8px; margin-top: 6px; }
 
 .play-controls {
@@ -1886,10 +1897,29 @@ button.primary.compact { padding: 3px 12px; font-size: 0.76rem; margin-left: aut
     padding: 4px 8px 0 0;
   }
 
+  /* ---------- Composers: give the typing area the full width ----------
+     Both composers are one flex row on desktop, which on a phone left the
+     textarea with a sliver: the Play bar spends ~180px on Do/Say/Story plus
+     ~75px on Send, and the chat bar ~90px on Send. Letting the row wrap and
+     moving the buttons onto their own line hands that width back to the
+     textarea, which is the part you actually type into.
+
+     Play: Do/Say/Story and Send share the top row (Send pushed to the right
+     edge), and `order` drops the textarea onto its own full-width row beneath
+     them. Two rows, and the typing area goes from ~138px to the full width —
+     measured at a 390px composer. */
+  .input-bar { flex-wrap: wrap; }
+  .mode-select button { flex: 1; padding: 7px 10px; }
+  .input-bar > button { margin-left: auto; }
+  /* min-width:0 lets a flex item shrink below its content width. */
+  .input-bar textarea { order: 1; flex: 1 0 100%; margin-top: 8px; min-width: 0; }
+
   /* ---------- AI Chat ---------- */
   /* No hover on touch, so the per-message copy/delete links stay visible. */
   .chat-msg-actions { opacity: 1; }
   .chat-msg { padding: 9px 11px 11px; }
-  .chat-composer { padding: 10px 0 14px; }
-  .chat-composer textarea { max-height: 140px; }
+  .chat-composer { padding: 10px 0 14px; flex-wrap: wrap; }
+  /* Full-width textarea; Send wraps beneath it and sits at the right edge. */
+  .chat-composer textarea { flex: 1 1 100%; max-height: 140px; }
+  .chat-composer button { margin-left: auto; }
 }
diff --git a/frontend/src/pages/Play.jsx b/frontend/src/pages/Play.jsx
index f9bd9c1..04c4b0a 100644
--- a/frontend/src/pages/Play.jsx
+++ b/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 })}