From 8fbb11e54df5bc02b9adbf4167aefe3b743f940f Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Wed, 1 Mar 2023 17:16:13 +0800
Subject: [PATCH] Update textarea to have min width and autoresize

---
 assets/css/tailwind.css                     |  3 ++-
 components/card/MarkdownRenderer.client.vue |  2 +-
 pages/notes/[id].vue                        | 17 ++++++-----------
 3 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 9a1b24e..be56c00 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -9,7 +9,8 @@ html {
 	scrollbar-width: none; /* Firefox */
 }
 
+html::-webkit-scrollbar,
 body::-webkit-scrollbar,
-html::-webkit-scrollbar {
+#__nuxt::-webkit-scrollbar {
 	@apply hidden;
 }
diff --git a/components/card/MarkdownRenderer.client.vue b/components/card/MarkdownRenderer.client.vue
index 097f8c3..339a4db 100644
--- a/components/card/MarkdownRenderer.client.vue
+++ b/components/card/MarkdownRenderer.client.vue
@@ -13,7 +13,7 @@
 </script>
 
 <template>
-	<div class="bg-secondary h-full w-full overflow-y-scroll p-4">
+	<div class="bg-secondary h-full min-h-screen w-full overflow-y-scroll p-4">
 		<div
 			class="prose prose-invert h-full max-h-full"
 			v-html="parsedMarkdown">
diff --git a/pages/notes/[id].vue b/pages/notes/[id].vue
index ec1b43a..bb351a1 100644
--- a/pages/notes/[id].vue
+++ b/pages/notes/[id].vue
@@ -3,7 +3,7 @@
 		name="edit"
 		@keydown.ctrl.s.prevent="submit(note)">
 		<template #content>
-			<div class="flex w-full justify-between">
+			<div class="sticky top-0 flex w-full justify-between">
 				<div
 					@click="toggleComp('text')"
 					class="bg-lightgray w-1/2 p-2 text-center text-xl"
@@ -21,9 +21,8 @@
 				<textarea
 					ref="noteTextArea"
 					v-show="comp === 'text'"
-					class="bg-secondary h-fit w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
-					@input="resizeNoteTextArea()"
-					v-model="note.description">
+					class="bg-secondary min-h-screen w-full flex-grow resize-none border-none p-4 outline-none placeholder:text-zinc-700 focus:outline-none"
+					v-model="input">
 				</textarea>
 				<CardMarkdownRenderer
 					v-show="comp === 'md'"
@@ -48,13 +47,8 @@
 	const isSubmitting = ref<Boolean>(false)
 	const isDeleting = ref<Boolean>(false)
 	const comp = ref<Comp>('text')
-	const noteTextArea = ref()
 	const description = useDescription()
-
-	const resizeNoteTextArea = () => {
-		noteTextArea.value.style.height = '18px'
-		noteTextArea.value.style.height = noteTextArea.value.scrollHeight + 'px'
-	}
+	const { textarea: noteTextArea, input } = useTextareaAutosize()
 
 	const toggleComp = (name: Comp) => {
 		comp.value = name
@@ -75,7 +69,7 @@
 			note.value.title = response._data.note.title
 			note.value.description = response._data.note.description
 			description.value = note.value.description
-			resizeNoteTextArea()
+			input.value = note.value.description
 		},
 	})
 
@@ -110,6 +104,7 @@
 		() => note.value.description,
 		() => {
 			description.value = note.value.description
+			input.value = note.value.description
 		}
 	)
 </script>