Adds new HTML contenteditable div and relative CSS

client/index.html

@@ -94,7 +94,8 @@
             <x-background class="full center">
                 <x-paper shadow="2">
                     <h3>Send a Message</h3>
-                    <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea>
+                    <!-- <textarea id="textInput" placeholder="Send a message" autocomplete="off" autofocus></textarea> -->
+                    <div id="textInput" class="textareaElement" role="textbox" placeholder="Send a message" autocomplete="off" autofocus contenteditable></div>
                     <div class="row-reverse">
                         <button class="button" type="submit" close>Send</button>
                         <a class="button" close>Cancel</a>

client/styles.css

@@ -496,6 +496,24 @@ textarea {
     background: #f1f3f4;
 }
 
+.textareaElement {
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    padding: 16px 24px;
+    border-radius: 16px;
+    margin: 8px 0;
+    font-size: 14px;
+    font-family: inherit;
+    background: #f1f3f4;
+    display: block;
+    overflow: auto;
+    resize: none;
+    min-height: 40px;
+    line-height: 16px;
+    max-height: 300px;
+}
+
 
 /* Info Animation */
 
@@ -704,6 +722,11 @@ textarea {
     background-color: var(--input-bg-color);
 }
 
+.textareaElement {
+    color: var(--text-color);
+    background-color: var(--input-bg-color);
+}
+
 /* Dark theme colors */
 body.dark-theme {
     --text-color: #eee;