diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index 8a00fbea..94176700 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) { /> ) : undefined} - { - if (onKeyDown(e)) return; +
+ { + if (onKeyDown(e)) return; - if ( - e.key === "ArrowUp" && - (!draft || draft.length === 0) - ) { - e.preventDefault(); - internalEmit("MessageRenderer", "edit_last"); - 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(); + } + + 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, + }) } - - if ( - !e.shiftKey && - e.key === "Enter" && - !isTouchscreenDevice - ) { - e.preventDefault(); - return send(); + disabled={ + uploadState.type === "uploading" || + uploadState.type === "sending" } - - 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} - /> + onChange={(e) => { + setMessage(e.currentTarget.value); + startTyping(); + onChange(e); + }} + onFocus={onFocus} + onBlur={onBlur} + /> +
{isTouchscreenDevice && (