diff --git a/pkg/interface/chat/src/js/components/lib/chat-input.js b/pkg/interface/chat/src/js/components/lib/chat-input.js index 67cc62ed0..9004b1efe 100644 --- a/pkg/interface/chat/src/js/components/lib/chat-input.js +++ b/pkg/interface/chat/src/js/components/lib/chat-input.js @@ -8,7 +8,11 @@ import { Sigil } from '/components/lib/icons/sigil'; import { uuid, uxToHex, hexToRgba } from '/lib/util'; -const DEFAULT_INPUT_HEIGHT = 28; + +// line height +const INPUT_LINE_HEIGHT = 28; + +const INPUT_TOP_PADDING = 3; function getAdvance(a, b) { @@ -103,7 +107,7 @@ export class ChatInput extends Component { this.state = { message: '', - textareaHeight: DEFAULT_INPUT_HEIGHT, + textareaHeight: INPUT_LINE_HEIGHT + INPUT_TOP_PADDING + 1, patpSuggestions: [], selectedSuggestion: null }; @@ -309,9 +313,8 @@ export class ChatInput extends Component { } textareaInput() { - const newHeight = this.textareaRef.current.scrollHeight < DEFAULT_INPUT_HEIGHT * 8 - ? `${this.textareaRef.current.scrollHeight}px` - : `${DEFAULT_INPUT_HEIGHT * 8}px` + const maxHeight = INPUT_LINE_HEIGHT * 8 + INPUT_TOP_PADDING; + const newHeight = `${Math.min(maxHeight, this.textareaRef.current.scrollHeight)}px`; this.setState({ textareaHeight: newHeight @@ -418,7 +421,7 @@ export class ChatInput extends Component { this.setState({ message: '', - textareaHeight: DEFAULT_INPUT_HEIGHT + textareaHeight: INPUT_LINE_HEIGHT + INPUT_TOP_PADDING + 1 }); } @@ -459,8 +462,8 @@ export class ChatInput extends Component {