From b6d8e340902d153d419c2850d67286ff0acb98b7 Mon Sep 17 00:00:00 2001
From: Drew Malzahn <drew.malzahn@protonmail.com>
Date: Fri, 26 Jun 2026 16:46:46 -0400
Subject: [PATCH] fix: Expand spell notes textarea full-width; add inter-spell
 padding

Split each spell into two table rows: the inputs row (name, MP, targets,
duration, delete) and a full-width notes row (colspan=5). Adds 10px
padding above/below each spell for visual separation between entries.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/CharacterSheet.tsx      | 170 +++++++++++++++++++-----------------
 src/fabula-ultima-sheet.css |  17 ++++
 2 files changed, 105 insertions(+), 82 deletions(-)

diff --git a/src/CharacterSheet.tsx b/src/CharacterSheet.tsx
index 61fb0ea..dc46474 100644
--- a/src/CharacterSheet.tsx
+++ b/src/CharacterSheet.tsx
@@ -1335,88 +1335,94 @@ export default function CharacterSheet() {
             </thead>
             <tbody>
               {spells.map((s, i) => (
-                <tr key={i}>
-                  <td className="spell-name-col">
-                    <input
-                      type="text"
-                      placeholder="Spell / Arcana name…"
-                      value={s.name || ""}
-                      onChange={(e) =>
-                        setSpells((prev) =>
-                          prev.map((sp, j) =>
-                            j === i ? { ...sp, name: e.target.value } : sp,
-                          ),
-                        )
-                      }
-                    />
-                    <textarea
-                      placeholder="Notes / effect description…"
-                      value={s.notes || ""}
-                      ref={(el) => { if (el) autoResize(el); }}
-                      onInput={(e) => autoResize(e.currentTarget)}
-                      onChange={(e) =>
-                        setSpells((prev) =>
-                          prev.map((sp, j) =>
-                            j === i ? { ...sp, notes: e.target.value } : sp,
-                          ),
-                        )
-                      }
-                    />
-                  </td>
-                  <td className="spell-mp-col">
-                    <input
-                      type="number"
-                      placeholder="0"
-                      value={s.mp || ""}
-                      onChange={(e) =>
-                        setSpells((prev) =>
-                          prev.map((sp, j) =>
-                            j === i ? { ...sp, mp: e.target.value } : sp,
-                          ),
-                        )
-                      }
-                      style={{ minHeight: 32 }}
-                    />
-                  </td>
-                  <td className="spell-targets-col">
-                    <input
-                      type="text"
-                      placeholder="Target(s)…"
-                      value={s.targets || ""}
-                      onChange={(e) =>
-                        setSpells((prev) =>
-                          prev.map((sp, j) =>
-                            j === i ? { ...sp, targets: e.target.value } : sp,
-                          ),
-                        )
-                      }
-                    />
-                  </td>
-                  <td className="spell-dur-col">
-                    <input
-                      type="text"
-                      placeholder="Duration…"
-                      value={s.duration || ""}
-                      onChange={(e) =>
-                        setSpells((prev) =>
-                          prev.map((sp, j) =>
-                            j === i ? { ...sp, duration: e.target.value } : sp,
-                          ),
-                        )
-                      }
-                    />
-                  </td>
-                  <td className="spell-del-col">
-                    <button
-                      className="spell-del-btn"
-                      onClick={() =>
-                        setSpells((prev) => prev.filter((_, j) => j !== i))
-                      }
-                    >
-                      ✕
-                    </button>
-                  </td>
-                </tr>
+                <React.Fragment key={i}>
+                  <tr className="spell-inputs-row">
+                    <td className="spell-name-col">
+                      <input
+                        type="text"
+                        placeholder="Spell / Arcana name…"
+                        value={s.name || ""}
+                        onChange={(e) =>
+                          setSpells((prev) =>
+                            prev.map((sp, j) =>
+                              j === i ? { ...sp, name: e.target.value } : sp,
+                            ),
+                          )
+                        }
+                      />
+                    </td>
+                    <td className="spell-mp-col">
+                      <input
+                        type="number"
+                        placeholder="0"
+                        value={s.mp || ""}
+                        onChange={(e) =>
+                          setSpells((prev) =>
+                            prev.map((sp, j) =>
+                              j === i ? { ...sp, mp: e.target.value } : sp,
+                            ),
+                          )
+                        }
+                        style={{ minHeight: 32 }}
+                      />
+                    </td>
+                    <td className="spell-targets-col">
+                      <input
+                        type="text"
+                        placeholder="Target(s)…"
+                        value={s.targets || ""}
+                        onChange={(e) =>
+                          setSpells((prev) =>
+                            prev.map((sp, j) =>
+                              j === i ? { ...sp, targets: e.target.value } : sp,
+                            ),
+                          )
+                        }
+                      />
+                    </td>
+                    <td className="spell-dur-col">
+                      <input
+                        type="text"
+                        placeholder="Duration…"
+                        value={s.duration || ""}
+                        onChange={(e) =>
+                          setSpells((prev) =>
+                            prev.map((sp, j) =>
+                              j === i ? { ...sp, duration: e.target.value } : sp,
+                            ),
+                          )
+                        }
+                      />
+                    </td>
+                    <td className="spell-del-col">
+                      <button
+                        className="spell-del-btn"
+                        onClick={() =>
+                          setSpells((prev) => prev.filter((_, j) => j !== i))
+                        }
+                      >
+                        ✕
+                      </button>
+                    </td>
+                  </tr>
+                  <tr className="spell-notes-row">
+                    <td colSpan={5}>
+                      <textarea
+                        placeholder="Notes / effect description…"
+                        value={s.notes || ""}
+                        ref={(el) => { if (el) autoResize(el); }}
+                        onInput={(e) => autoResize(e.currentTarget)}
+                        onChange={(e) =>
+                          setSpells((prev) =>
+                            prev.map((sp, j) =>
+                              j === i ? { ...sp, notes: e.target.value } : sp,
+                            ),
+                          )
+                        }
+                      />
+                    </td>
+                  </tr>
+                </React.Fragment>
               ))}
             </tbody>
           </table>
diff --git a/src/fabula-ultima-sheet.css b/src/fabula-ultima-sheet.css
index b6e9c64..dc14059 100644
--- a/src/fabula-ultima-sheet.css
+++ b/src/fabula-ultima-sheet.css
@@ -765,6 +765,23 @@ input[type="number"] {
   min-height: 55px;
 }
 
+.spell-inputs-row td {
+  border-bottom: none;
+  padding-top: 10px;
+}
+
+.spell-notes-row td {
+  padding-top: 0;
+  padding-bottom: 10px;
+}
+
+.spell-notes-row textarea {
+  display: block;
+  width: 100%;
+  min-height: 0;
+  box-sizing: border-box;
+}
+
 .spell-name-col {
   width: 35%;
 }