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:
@@ -192,6 +192,11 @@ function apiURL(path: string) {
|
|||||||
return new URL(path, window.location.href).toString();
|
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
|
// 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
|
// secure context (HTTPS or localhost); over plain HTTP it's undefined, so we
|
||||||
// fall back to the deprecated execCommand("copy"), which still works there.
|
// fall back to the deprecated execCommand("copy"), which still works there.
|
||||||
@@ -1171,6 +1176,8 @@ export default function CharacterSheet() {
|
|||||||
<textarea
|
<textarea
|
||||||
placeholder="Skill information…"
|
placeholder="Skill information…"
|
||||||
value={cls.skills || ""}
|
value={cls.skills || ""}
|
||||||
|
ref={(el) => { if (el) autoResize(el); }}
|
||||||
|
onInput={(e) => autoResize(e.currentTarget)}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setPrimaryClasses((prev) =>
|
setPrimaryClasses((prev) =>
|
||||||
prev.map((c, i) =>
|
prev.map((c, i) =>
|
||||||
@@ -1345,6 +1352,8 @@ export default function CharacterSheet() {
|
|||||||
<textarea
|
<textarea
|
||||||
placeholder="Notes / effect description…"
|
placeholder="Notes / effect description…"
|
||||||
value={s.notes || ""}
|
value={s.notes || ""}
|
||||||
|
ref={(el) => { if (el) autoResize(el); }}
|
||||||
|
onInput={(e) => autoResize(e.currentTarget)}
|
||||||
onChange={(e) =>
|
onChange={(e) =>
|
||||||
setSpells((prev) =>
|
setSpells((prev) =>
|
||||||
prev.map((sp, j) =>
|
prev.map((sp, j) =>
|
||||||
|
|||||||
@@ -782,7 +782,8 @@ input[type="number"] {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.spell-del-col {
|
.spell-del-col {
|
||||||
width: 40px;
|
width: 1px;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spell-del-btn {
|
.spell-del-btn {
|
||||||
|
|||||||
Reference in New Issue
Block a user