allow message input textarea height to grow with more text

css/base.css

@@ -197,7 +197,7 @@ textarea {
   height: 2.5rem;
   border-bottom: 1px solid #ccc;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
-  transition: all 0.1s ease-in-out;
+  transition: all 0.1s ease-in-out, height 0s;
 }
 
 input[type="text"],
@@ -1508,6 +1508,13 @@ img.channel {
   color: #2196f3!important;
 }
 
+/* The textarea where the message is entered. */
+#send-message-input {
+  overflow: hidden auto;
+  min-height: 2.5rem;
+  max-height: 6rem;
+}
+
 /* New chat invitation panel */
 
 .accept-invite-panel {

src/widgets/send-message.jsx

@@ -111,6 +111,10 @@ class SendMessage extends React.PureComponent {
         // Set focus on desktop, but not on mobile: focus causes soft keyboard to pop up.
         this.messageEditArea.focus();
       }
+
+      // Adjust height of the message area for the amount of text.
+      this.messageEditArea.style.height = '0px';
+      this.messageEditArea.style.height = this.messageEditArea.scrollHeight + 'px';
     }
 
     if (prevProps.topicName != this.props.topicName) {
@@ -276,7 +280,7 @@ class SendMessage extends React.PureComponent {
                   </Suspense>) :
                   <textarea id="send-message-input" placeholder={prompt}
                     value={this.state.message} onChange={this.handleMessageTyping}
-                    onKeyPress={this.handleKeyPress}
+                    onKeyDown={this.handleKeyPress}
                     ref={ref => {this.messageEditArea = ref;}} />)}
               {this.state.message || !audioEnabled ?
                 <a href="#" onClick={this.handleSend} title={formatMessage(messages.icon_title_send)}>

umd/index.dev.js

@@ -14981,6 +14981,8 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       if (window.getComputedStyle(this.messageEditArea).getPropertyValue('transition-property') == 'all') {
         this.messageEditArea.focus();
       }
+      this.messageEditArea.style.height = '0px';
+      this.messageEditArea.style.height = this.messageEditArea.scrollHeight + 'px';
     }
     if (prevProps.topicName != this.props.topicName) {
       this.setState({
@@ -15151,7 +15153,7 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
       placeholder: prompt,
       value: this.state.message,
       onChange: this.handleMessageTyping,
-      onKeyPress: this.handleKeyPress,
+      onKeyDown: this.handleKeyPress,
       ref: ref => {
         this.messageEditArea = ref;
       }