From e26f135b7969aebac9f5155625d6195417470011 Mon Sep 17 00:00:00 2001
From: Drew Malzahn <drew.malzahn@protonmail.com>
Date: Fri, 26 Jun 2026 16:38:10 -0400
Subject: [PATCH] fix: Auto-resize spell/class textareas on load; shrink delete
 column

- Add autoResize helper and wire it via ref callback (mount) and onInput
  (typing) to spell notes and class skills textareas
- Change .spell-del-col from width:40px to width:1px + white-space:nowrap
  so the delete button column shrink-wraps to its content

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/CharacterSheet.tsx      | 9 +++++++++
 src/fabula-ultima-sheet.css | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/CharacterSheet.tsx b/src/CharacterSheet.tsx
index 37b4a9e..61fb0ea 100644
--- a/src/CharacterSheet.tsx
+++ b/src/CharacterSheet.tsx
@@ -192,6 +192,11 @@ function apiURL(path: string) {
   return new URL(path, window.location.href).toString();
 }
 
+function autoResize(el: HTMLTextAreaElement) {
+  el.style.height = "auto";
+  el.style.height = el.scrollHeight + "px";
+}
+
 // Copy text to the clipboard. navigator.clipboard is only available in a
 // secure context (HTTPS or localhost); over plain HTTP it's undefined, so we
 // fall back to the deprecated execCommand("copy"), which still works there.
@@ -1171,6 +1176,8 @@ export default function CharacterSheet() {
                   <textarea
                     placeholder="Skill information…"
                     value={cls.skills || ""}
+                    ref={(el) => { if (el) autoResize(el); }}
+                    onInput={(e) => autoResize(e.currentTarget)}
                     onChange={(e) =>
                       setPrimaryClasses((prev) =>
                         prev.map((c, i) =>
@@ -1345,6 +1352,8 @@ 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) =>
diff --git a/src/fabula-ultima-sheet.css b/src/fabula-ultima-sheet.css
index eac28e2..b6e9c64 100644
--- a/src/fabula-ultima-sheet.css
+++ b/src/fabula-ultima-sheet.css
@@ -782,7 +782,8 @@ input[type="number"] {
 }
 
 .spell-del-col {
-  width: 40px;
+  width: 1px;
+  white-space: nowrap;
 }
 
 .spell-del-btn {