diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 8a00fbea589879e8e31816a0cc7d419c48b2f670..94176700ddd1fe83a6343e23aefed90b70c9fbf3 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -61,13 +61,18 @@ export type UploadState = const Base = styled.div` display: flex; - /*padding: 0 12px;*/ + align-items: flex-start; background: var(--message-box); textarea { font-size: 0.875rem; background: transparent; } + + .textarea { + flex-grow: 1; + padding: 12px 0; + } `; const Blocked = styled.div` @@ -419,62 +424,64 @@ function MessageBox({ channel, draft }: Props) { /> </Action> ) : undefined} - <TextAreaAutoSize - autoFocus - hideBorder - maxRows={5} - padding={14} - id="message" - value={draft ?? ""} - onKeyUp={onKeyUp} - onKeyDown={(e) => { - if (onKeyDown(e)) return; - - if ( - e.key === "ArrowUp" && - (!draft || draft.length === 0) - ) { - e.preventDefault(); - internalEmit("MessageRenderer", "edit_last"); - return; - } + <div class="textarea"> + <TextAreaAutoSize + autoFocus + hideBorder + maxRows={20} + padding={0} + id="message" + value={draft ?? ""} + onKeyUp={onKeyUp} + onKeyDown={(e) => { + if (onKeyDown(e)) return; + + if ( + e.key === "ArrowUp" && + (!draft || draft.length === 0) + ) { + e.preventDefault(); + internalEmit("MessageRenderer", "edit_last"); + return; + } - if ( - !e.shiftKey && - e.key === "Enter" && - !isTouchscreenDevice - ) { - e.preventDefault(); - return send(); - } + if ( + !e.shiftKey && + e.key === "Enter" && + !isTouchscreenDevice + ) { + e.preventDefault(); + return send(); + } - debouncedStopTyping(true); - }} - placeholder={ - channel.channel_type === "DirectMessage" - ? translate("app.main.channel.message_who", { - person: client.users.get( - client.channels.getRecipient(channel._id), - )?.username, - }) - : channel.channel_type === "SavedMessages" - ? translate("app.main.channel.message_saved") - : translate("app.main.channel.message_where", { - channel_name: channel.name, - }) - } - disabled={ - uploadState.type === "uploading" || - uploadState.type === "sending" - } - onChange={(e) => { - setMessage(e.currentTarget.value); - startTyping(); - onChange(e); - }} - onFocus={onFocus} - onBlur={onBlur} - /> + debouncedStopTyping(true); + }} + placeholder={ + channel.channel_type === "DirectMessage" + ? translate("app.main.channel.message_who", { + person: client.users.get( + client.channels.getRecipient(channel._id), + )?.username, + }) + : channel.channel_type === "SavedMessages" + ? translate("app.main.channel.message_saved") + : translate("app.main.channel.message_where", { + channel_name: channel.name, + }) + } + disabled={ + uploadState.type === "uploading" || + uploadState.type === "sending" + } + onChange={(e) => { + setMessage(e.currentTarget.value); + startTyping(); + onChange(e); + }} + onFocus={onFocus} + onBlur={onBlur} + /> + </div> {isTouchscreenDevice && ( <Action> <IconButton onClick={send}>