Auto-resize textarea height on user input

We want the textarea to grow when a user writes longer text. This also
fixes the `resizable` property, which when `true` allows the user to
resize the textarea with their mouse.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>

src/components/CommentTextarea.svelte

@@ -115,9 +115,10 @@
   }
   .preview {
     font-size: var(--font-size-small);
-    padding-top: 1rem;
-    padding-left: 1rem;
-    min-height: 5rem;
+    min-height: 6.375rem;
+    padding: 0.75rem;
+    margin-left: 1px;
+    margin-top: 1px;
   }
   .inactive {
     box-shadow: 0 0 0 1px var(--color-border-hint);
@@ -166,7 +167,6 @@
         bind:selectionEnd
         bind:selectionStart
         {focus}
-        resizable
         on:submit={submit}
         bind:value={commentBody}
         {placeholder} />

src/components/Markdown.svelte

@@ -218,7 +218,7 @@
   }
 
   .markdown :global(p) {
-    line-height: 1.625;
+    line-height: 1.625rem;
     margin-top: 0;
     margin-bottom: 0.625rem;
   }

src/components/Textarea.svelte

@@ -2,17 +2,21 @@
   import { afterUpdate, beforeUpdate, createEventDispatcher } from "svelte";
   import { isMac } from "@app/lib/utils";
 
-  export let resizable: boolean = false;
   export let value: string | number | undefined = undefined;
   export let placeholder: string | undefined = undefined;
   export let focus: boolean = false;
+  // If `false` we automatically grow the textarea height.
+  // If `true` we show a resize handle on the lower right-hand side of the
+  // textarea to allow resizing the textarea manually.
+  export let resizable: boolean = false;
+
   // Defaulting selectionStart and selectionEnd to 0, since no full support yet.
-  export let selectionStart = 0;
-  export let selectionEnd = 0;
+  export let selectionStart: number = 0;
+  export let selectionEnd: number = 0;
 
   let textareaElement: HTMLTextAreaElement | undefined = undefined;
 
-  // We either auto-grow the text area, or allow the user to resize it. These
+  // We either auto-grow the textarea, or allow the user to resize it. These
   // options are mutually exclusive because a user resized textarea would
   // automatically shrink upon text input otherwise.
   $: if (textareaElement && !resizable) {
@@ -66,11 +70,12 @@
     border-radius: var(--border-radius-small);
     font-family: inherit;
     height: 5rem;
-    padding: 1rem;
+    padding: 0.75rem;
     width: 100%;
-    min-height: 2.5rem;
+    min-height: 6.375rem;
     resize: none;
     overflow: hidden;
+    line-height: 1.625rem;
   }
 
   .resizable {
@@ -78,10 +83,6 @@
     overflow: scroll;
   }
 
-  textarea::-webkit-scrollbar {
-    display: none;
-  }
-
   textarea::-webkit-scrollbar-corner {
     background-color: transparent;
   }

src/views/projects/Issue/New.svelte

@@ -168,7 +168,6 @@
             <svelte:fragment slot="description">
               {#if action === "create"}
                 <Textarea
-                  resizable
                   bind:selectionStart
                   bind:selectionEnd
                   on:drop={handleFileDrop}