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.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();
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user