diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index e63b1be6..f2aa62c0 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -537,7 +537,6 @@ a { } .MessageComposer_input > textarea { - padding: 0 16px; border: none; border-radius: 24px; background: #F6F6F6; @@ -548,6 +547,8 @@ a { flex: 1; padding: 14px; box-sizing: border-box; + overflow: hidden; + max-height: 113px; } .MessageComposer_input > button.send { diff --git a/src/platform/web/ui/session/room/MessageComposer.js b/src/platform/web/ui/session/room/MessageComposer.js index 3b151047..11007b84 100644 --- a/src/platform/web/ui/session/room/MessageComposer.js +++ b/src/platform/web/ui/session/room/MessageComposer.js @@ -31,8 +31,12 @@ export class MessageComposer extends TemplateView { this._input = t.textarea({ enterkeyhint: 'send', onKeydown: e => this._onKeyDown(e), - onInput: () => vm.setInput(this._input.value), - placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…" + onInput: () => { + vm.setInput(this._input.value); + this._adjustHeight(); + }, + placeholder: vm.isEncrypted ? "Send an encrypted message…" : "Send a message…", + rows: "1" }); this._focusInput = () => this._input.focus(); this.value.on("focus", this._focusInput); @@ -82,6 +86,7 @@ export class MessageComposer extends TemplateView { this._input.focus(); if (await this.value.sendMessage(this._input.value)) { this._input.value = ""; + this._adjustHeight(); } } @@ -105,4 +110,13 @@ export class MessageComposer extends TemplateView { this._attachmentPopup.showRelativeTo(evt.target, 12); } } + + _adjustHeight() { + window.requestAnimationFrame(() => { + this._input.style.height = "auto"; + const scrollHeight = this._input.scrollHeight; + this._input.style.height = `${scrollHeight}px`; + }); + } + }