diff --git a/index.html b/index.html
index 90e5f56..144d7fa 100644
--- a/index.html
+++ b/index.html
@@ -57,11 +57,12 @@
font: 12.5px/1.45 ui-monospace, Menlo, monospace; color: #9aa4b2;
word-break: break-word; padding-top: 8px; user-select: text;
}
- .entry .v input {
+ .entry .v textarea {
width: 100%; background: #0d0f12; color: #e6e8eb; border: 1px solid #2a313a;
- border-radius: 8px; padding: 7px 9px; font-size: 14px;
+ border-radius: 8px; padding: 7px 9px; font-size: 14px; line-height: 1.45;
+ min-height: 40px; resize: none; overflow-y: auto; max-height: 180px;
}
- .entry .v input:focus { border-color: #1f7a3d; outline: none; }
+ .entry .v textarea:focus { border-color: #1f7a3d; outline: none; }
@media (max-width: 640px) {
/* Mobile: key on top, value below */
.entry { grid-template-columns: 1fr; gap: 3px; }
@@ -174,21 +175,23 @@ function renderForm() {
k.textContent = b.key; // read-only by design
const v = document.createElement("div");
v.className = "v";
- const input = document.createElement("input");
- input.type = "text";
- input.spellcheck = false;
- input.autocapitalize = "off";
- input.autocorrect = "off";
- input.value = b.value;
- input.addEventListener("input", () => {
- b.value = input.value;
+ const area = document.createElement("textarea");
+ area.rows = 1;
+ area.spellcheck = false;
+ area.autocapitalize = "off";
+ area.autocorrect = "off";
+ area.value = b.value;
+ area.addEventListener("input", () => {
+ b.value = area.value;
localDirty = true;
updateBanner();
+ autoGrow(area);
});
- v.appendChild(input);
+ v.appendChild(area);
row.appendChild(k);
row.appendChild(v);
el.appendChild(row);
+ autoGrow(area);
continue;
}
// Unparseable data line — never let the form clobber a file we don't
@@ -201,6 +204,12 @@ function renderForm() {
$("notice").style.display = "none";
}
+// Grow a value textarea to fit its content (cap at 180px, then scroll).
+function autoGrow(el) {
+ el.style.height = "auto";
+ el.style.height = Math.min(el.scrollHeight + 2, 180) + "px";
+}
+
function switchMode(m) {
mode = m;
$("btnForm").classList.toggle("on", m === "form");