fix: textarea height setting now visibly changes empty-state size

The previous approach used a 600ms preview animation + syncHeight() which
collapsed the textarea back to 1 line (empty scrollHeight). Now syncHeight
enforces minHeight = maxHeight/3, so each setting (S/M/L) has a visibly
distinct resting height even when the input is empty.

  S (120px): min ~40px  ≈ 1-2 lines at rest
  M (240px): min ~80px  ≈ 3 lines at rest
  L (480px): min ~160px ≈ 5-6 lines at rest

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-04-28 21:08:46 -04:00
parent af7d8b40e2
commit af4d78136a

View File

@@ -151,7 +151,9 @@
inputEl.style.height = 'auto'; inputEl.style.height = 'auto';
inputEl.style.maxHeight = maxHeight + 'px'; inputEl.style.maxHeight = maxHeight + 'px';
const sh = inputEl.scrollHeight; const sh = inputEl.scrollHeight;
inputEl.style.height = Math.min(sh, maxHeight) + 'px'; // Minimum height is 1/3 of maxHeight so each setting is visually distinct
const minH = Math.round(maxHeight / 3);
inputEl.style.height = Math.max(Math.min(sh, maxHeight), minH) + 'px';
} }
function updateHeightUI() { function updateHeightUI() {
@@ -169,13 +171,7 @@
maxHeight = HEIGHT_SIZES[nextIdx]; maxHeight = HEIGHT_SIZES[nextIdx];
localStorage.setItem('maxHeight', maxHeight); localStorage.setItem('maxHeight', maxHeight);
updateHeightUI(); updateHeightUI();
if (!inputEl.value.trim()) { syncHeight();
inputEl.style.transition = 'height 0.2s ease';
inputEl.style.height = maxHeight + 'px';
setTimeout(syncHeight, 600);
} else {
syncHeight();
}
}); });
} }