From c30c2e00cb1a87bef2963ce2703500a9f0941bc4 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 13 Oct 2021 20:37:03 +0200
Subject: [PATCH] fix: task input height on devices with smaller font size

---
 src/components/tasks/add-task.vue | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/tasks/add-task.vue b/src/components/tasks/add-task.vue
index 1f16e692..51017b24 100644
--- a/src/components/tasks/add-task.vue
+++ b/src/components/tasks/add-task.vue
@@ -41,7 +41,7 @@ import TaskService from '../../services/task'
 import createTask from '@/components/tasks/mixins/createTask'
 import QuickAddMagic from '@/components/tasks/partials/quick-add-magic.vue'
 
-const INITIAL_SCROLL_HEIGHT = 40
+const INPUT_BORDER_PX = 2
 
 const cleanupTitle = title => {
 	return title.replace(/^((\* |\+ |- )(\[ \] )?)/g, '')
@@ -54,7 +54,8 @@ export default {
 			newTaskTitle: '',
 			taskService: new TaskService(),
 			errorMessage: '',
-			textAreaHeight: INITIAL_SCROLL_HEIGHT,
+			textAreaHeight: null,
+			initialTextAreaHeight: null,
 		}
 	},
 	mixins: [
@@ -71,14 +72,17 @@ export default {
 	},
 	watch: {
 		newTaskTitle(newVal) {
-			let scrollHeight = this.$refs.newTaskInput.scrollHeight
-			if (scrollHeight < INITIAL_SCROLL_HEIGHT || newVal === '') {
-				scrollHeight = INITIAL_SCROLL_HEIGHT
+			let scrollHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
+			if (scrollHeight < this.initialTextAreaHeight || newVal === '') {
+				scrollHeight = this.initialTextAreaHeight
 			}
 
 			this.textAreaHeight = scrollHeight
 		},
 	},
+	mounted() {
+		this.initialTextAreaHeight = this.$refs.newTaskInput.scrollHeight + INPUT_BORDER_PX
+	},
 	methods: {
 		addTask() {
 			if (this.newTaskTitle === '') {