From 6863fef7e51deb31cf1db0ef83e70cd0f7ea5cb1 Mon Sep 17 00:00:00 2001
From: RMidhunSuresh <hi@midhun.dev>
Date: Fri, 29 Oct 2021 17:00:02 +0530
Subject: [PATCH] Resize composer with text

Signed-off-by: RMidhunSuresh <hi@midhun.dev>
---
 .../web/ui/css/themes/element/theme.css        |  3 ++-
 .../web/ui/session/room/MessageComposer.js     | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

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`;
+        });
+    }
+
 }