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");