src/CharacterSheet.tsx

@@ -1335,7 +1335,8 @@ export default function CharacterSheet() {
             </thead>
             <tbody>
               {spells.map((s, i) => (
-                <tr key={i}>
+                <React.Fragment key={i}>
+                  <tr className="spell-inputs-row">
                     <td className="spell-name-col">
                       <input
                         type="text"
@@ -1349,19 +1350,6 @@ export default function CharacterSheet() {
                           )
                         }
                       />
-                    <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
@@ -1417,6 +1405,24 @@ export default function CharacterSheet() {
                       </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>

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%;
 }