Update textarea to have min width and autoresize

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;
 }

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">

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"
+					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"
-					@input="resizeNoteTextArea()"
+					v-model="input">
-					v-model="note.description">
 				</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 { textarea: noteTextArea, input } = useTextareaAutosize()
-	const resizeNoteTextArea = () => {
-		noteTextArea.value.style.height = '18px'
-		noteTextArea.value.style.height = noteTextArea.value.scrollHeight + 'px'
-	}
 
 	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>