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>
This commit is contained in:
2026-06-26 16:38:10 -04:00
committed by drew
parent 85c02d7f7f
commit 5643b31fb0
2 changed files with 11 additions and 1 deletions

View File

@@ -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) =>

View File

@@ -782,7 +782,8 @@ input[type="number"] {
}
.spell-del-col {
width: 40px;
width: 1px;
white-space: nowrap;
}
.spell-del-btn {