Auto set number of rows for workout note edit textarea

templates/partials/workout_note.html

@@ -18,7 +18,7 @@
     <div class="flex items-center">
         <textarea
             class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
-            placeholder="Your note..." name="note" rows="2">{{ note }}</textarea>
+            placeholder="Your note..." name="note">{{ note }}</textarea>
         <div class="flex flex-col">
             <button
                 class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
@@ -42,6 +42,18 @@
                 <span class="sr-only">Save note</span>
             </button>
         </div>
+        <script>
+            (function () {
+                const tx = document.querySelector('#workout-note textarea');
+                tx.setAttribute("style", "height:" + (tx.scrollHeight) + "px;overflow-y:hidden;");
+                tx.addEventListener("input", OnInput, false);
+
+                function OnInput() {
+                    this.style.height = 0;
+                    this.style.height = (this.scrollHeight) + "px";
+                }
+            })();
+        </script>
     </div>
     {% endif %}
 </div>