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:
@@ -151,7 +151,9 @@
|
||||
inputEl.style.height = 'auto';
|
||||
inputEl.style.maxHeight = maxHeight + 'px';
|
||||
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() {
|
||||
@@ -169,13 +171,7 @@
|
||||
maxHeight = HEIGHT_SIZES[nextIdx];
|
||||
localStorage.setItem('maxHeight', maxHeight);
|
||||
updateHeightUI();
|
||||
if (!inputEl.value.trim()) {
|
||||
inputEl.style.transition = 'height 0.2s ease';
|
||||
inputEl.style.height = maxHeight + 'px';
|
||||
setTimeout(syncHeight, 600);
|
||||
} else {
|
||||
syncHeight();
|
||||
}
|
||||
syncHeight();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user