Merge branch 'main' into vue3

src/components/tasks/add-task.vue

@@ -10,7 +10,7 @@
 					v-focus
 					v-model="newTaskTitle"
 					ref="newTaskInput"
-					:style="{'height': `${textAreaHeight}px`}"
+					:style="{'height': `calc(${textAreaHeight}px - 2px + 1rem)`}"
 					@keyup="errorMessage = ''"
 					@keydown.enter="handleEnter"
 				/>
@@ -40,7 +40,8 @@
 import TaskService from '../../services/task'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
-const INITIAL_SCROLL_HEIGHT = 40
+const INPUT_BORDER_PX = 2
+const LINE_HEIGHT = 1.5 // using getComputedStyles().lineHeight returns an (wrong) absolute pixel value, we need the factor to do calculations with it.
 
 const cleanupTitle = title => {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@@ -54,7 +55,8 @@ export default {
 			newTaskTitle: '',
 			taskService: new TaskService(),
 			errorMessage: '',
-			textAreaHeight: INITIAL_SCROLL_HEIGHT,
+			textAreaHeight: null,
+			initialTextAreaHeight: null,
 		}
 	},
 	components: {
@@ -68,14 +70,17 @@ export default {
 	},
 	watch: {
 		newTaskTitle(newVal) {
-			let scrollHeight = this.$refs.newTaskInput.scrollHeight
-			if (scrollHeight < INITIAL_SCROLL_HEIGHT || newVal === '') {
-				scrollHeight = INITIAL_SCROLL_HEIGHT
-			}
+			// Calculating the textarea height based on lines of input in it. That is more reliable when removing a 
+			// line from the input.
+			const numberOfLines = newVal.split(/\r\n|\r|\n/).length
+			const fontSize =  parseInt(window.getComputedStyle(this.$refs.newTaskInput, null).getPropertyValue('font-size'))
 
-			this.textAreaHeight = scrollHeight
+			this.textAreaHeight = numberOfLines * fontSize * LINE_HEIGHT + INPUT_BORDER_PX
 		},
 	},
+	mounted() {
+		this.initialTextAreaHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
+	},
 	methods: {
 		addTask() {
 			if (this.newTaskTitle === '') {