Auto expand chat input when text is growing

Expand textarea input up to 4 lines when message is fill the input, based on the approach here https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/, we replicate textarea content in an hidden element which will expand textarea size when then text content grow.

static/galene.css

@@ -289,7 +289,6 @@
 }
 
 .reply {
-    height: 53px;
     width: 100%;
     background-color: #eae7e5;
     padding: 10px 5px 10px 5px;
@@ -297,8 +296,29 @@
     z-index: 1000;
 }
 
-.reply textarea {
-    width: 100%;
+.reply-button {
+    flex: 0 43px;
+}
+
+.reply-wrap {
+    display: grid;
+    flex: 1;
+    margin-right: .5em;
+}
+
+.reply-wrap::after {
+    content: attr(data-replicated-value) " ";
+    white-space: pre-wrap;
+    visibility: hidden;
+}
+
+.reply-wrap > textarea,
+.reply-wrap::after {
+    /* Identical styling required!! */
+    font: inherit;
+    /* Place on top of each other */
+    grid-area: 1 / 1 / 2 / 2;
+    max-height: 100px;
     resize: none;
     overflow: hidden;
     padding: 5px;
@@ -309,15 +329,9 @@
     height: 100%;
 }
 
-textarea.form-reply {
-    height: 2.1em;
-    margin-right: .5em;
-}
-
 .form-reply {
     display: block;
     width: 100%;
-    height: 34px;
     padding: 6px 12px;
     font-size: 1rem;
     color: #555;
@@ -797,6 +811,8 @@ h1 {
 #chatbox {
     height: 100%;
     position: relative;
+    display: flex;
+    flex-direction: column;
 }
 
 #chat {
@@ -820,7 +836,7 @@ h1 {
 
 #box {
     overflow: auto;
-    height: calc(100% - 53px);
+    height: 100%;
     padding: 10px;
 }
 
@@ -851,7 +867,7 @@ h1 {
     width: 100%;
     border: none;
     resize: none;
-    overflow-y: hidden;
+    overflow-y: auto;
 }
 
 #input:focus {

static/galene.html

@@ -78,8 +78,12 @@
                   <div id="box"></div>
                   <div class="reply">
                     <form id="inputform">
-                      <textarea id="input" class="form-reply"></textarea>
+                      <div class="reply-wrap">
+                        <textarea rows="1" id="input" class="form-reply"></textarea>
+                      </div>
+                      <div class="reply-button">
                         <input id="inputbutton" type="submit" value="&#10148;" class="btn btn-default"/>
+                      </div>
                     </form>
                   </div>
                 </div>

static/galene.js

@@ -2847,6 +2847,13 @@ document.getElementById('input').onkeypress = function(e) {
     }
 };
 
+document.getElementById('input').oninput = function(e) {
+    let textarea = /** @type{HTMLTextAreaElement} */ (e.target);
+    e.preventDefault();
+    // update replicated content
+    textarea.parentNode.dataset.replicatedValue = textarea.value;
+};
+
 function chatResizer(e) {
     e.preventDefault();
     let full_width = document.getElementById("mainrow").offsetWidth;