fix(chat): hide textarea scrollbar when content fits
- Set overflow-hidden by default on textarea - Only show scrollbar when content exceeds max height (200px) - Fix scrollbar appearing on empty input Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
8a39505ee6
commit
3d120e1ce3
|
|
@ -58,8 +58,13 @@ export function InputArea({
|
|||
useEffect(() => {
|
||||
const textarea = textareaRef.current;
|
||||
if (textarea) {
|
||||
// 重置高度以获取正确的scrollHeight
|
||||
textarea.style.height = 'auto';
|
||||
textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
|
||||
// 设置新高度,最小44px(单行),最大200px
|
||||
const newHeight = Math.max(44, Math.min(textarea.scrollHeight, 200));
|
||||
textarea.style.height = `${newHeight}px`;
|
||||
// 只有当内容超过最大高度时才显示滚动条
|
||||
textarea.style.overflowY = textarea.scrollHeight > 200 ? 'auto' : 'hidden';
|
||||
}
|
||||
}, [message]);
|
||||
|
||||
|
|
@ -317,7 +322,7 @@ export function InputArea({
|
|||
disabled={disabled || isUploading}
|
||||
rows={1}
|
||||
className={clsx(
|
||||
'w-full resize-none rounded-xl border border-secondary-200 bg-white px-4 py-3 pr-12',
|
||||
'w-full resize-none overflow-hidden rounded-xl border border-secondary-200 bg-white px-4 py-3 pr-12',
|
||||
'text-secondary-900 placeholder:text-secondary-400',
|
||||
'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
|
||||
'disabled:bg-secondary-50 disabled:cursor-not-allowed',
|
||||
|
|
|
|||
Loading…
Reference in New Issue