From 77b49dcb601fe3accf1037b6b38b62b01766dff7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 17 Oct 2023 10:53:49 +0200
Subject: [PATCH] Auto-resize textarea height on user input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  8 ++++----
 src/components/Markdown.svelte        |  2 +-
 src/components/Textarea.svelte        | 21 +++++++++++----------
 src/views/projects/Issue/New.svelte   |  1 -
 4 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/components/CommentTextarea.svelte b/src/components/CommentTextarea.svelte
index ab021669e..a8daa834e 100644
--- a/src/components/CommentTextarea.svelte
+++ b/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} />
diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 8f44baec4..3501edfc7 100644
--- a/src/components/Markdown.svelte
+++ b/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;
   }
diff --git a/src/components/Textarea.svelte b/src/components/Textarea.svelte
index 28bda3786..ff590cebb 100644
--- a/src/components/Textarea.svelte
+++ b/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;
   }
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index 7badf4e86..5da5cade0 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/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}