From 48ce3d96af5a0d664da9349a0a8fb8c8adcae2e3 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Sun, 5 Mar 2023 16:54:57 +0100
Subject: [PATCH] Add auti-resizing input

---
 src/app.scss        |  5 +++++
 src/lib/Chat.svelte | 12 ++++++++++--
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 2254112..c00137f 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -33,6 +33,11 @@ a.is-disabled {
   text-decoration: none !important;
 }
 
+/* Style the chat input */
+.chat-input {
+  overflow-y:hidden;
+}
+
 $footer-padding: 3rem 1.5rem;
 
 @import "/node_modules/bulma/bulma.sass";
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 4120ba1..c30f7ef 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -107,7 +107,7 @@
 </script>
 
 <nav class="level is-mobile chat-header">
-  <div class="level-left chatname">
+  <div class="level-left">
     <div class="level-item">
       <p class="subtitle is-5">
         {chat.name}
@@ -184,16 +184,24 @@
 <form class="field has-addons has-addons-right" on:submit|preventDefault={send}>
   <p class="control is-expanded">
     <textarea
-      class="input is-info is-medium is-focused"
+      class="input is-info is-medium is-focused chat-input"
       placeholder="Type your message here..."
       rows="1"
       on:keydown={(e) => {
         // Only send if Enter is pressed, not Shift+Enter
         if (e.key === "Enter" && !e.shiftKey) {
           send();
+          // Resize back to auto
+          // @ts-ignore
+          e.target.style.height = "auto";
           e.preventDefault();
         }
       }}
+      on:input={(e) => {
+        // Resize the textarea to fit the content
+        // @ts-ignore
+        e.target.style.height = e.target.scrollHeight + "px";
+      }}
       bind:this={input}
     />
   </p>