fix(task): allow clicking on the whole task to open the task detail view

Resolves #3172

src/components/tasks/partials/singleTaskInList.vue

@@ -1,5 +1,9 @@
 <template>
-	<div :class="{'is-loading': taskService.loading}" class="task loader-container">
+	<router-link
+		:to="taskDetailRoute"
+		:class="{'is-loading': taskService.loading}"
+		class="task loader-container"
+	>
 		<fancycheckbox
 			:disabled="(isArchived || disabled) && !canMarkAsDone"
 			@change="markAsDone"
@@ -12,8 +16,7 @@
 			class="mr-1"
 		/>
 		
-		<router-link
-			:to="taskDetailRoute"
+		<div
 			:class="{ 'done': task.done, 'show-list': showList && taskList !== null}"
 			class="tasktext"
 		>
@@ -93,7 +96,7 @@
 			</span>
 
 			<checklist-summary :task="task"/>
-		</router-link>
+		</div>
 
 		<progress
 			class="progress is-small"
@@ -114,14 +117,14 @@
 
 		<BaseButton
 			:class="{'is-favorite': task.isFavorite}"
-			@click="toggleFavorite"
+			@click.prevent="toggleFavorite"
 			class="favorite"
 		>
 			<icon icon="star" v-if="task.isFavorite"/>
 			<icon :icon="['far', 'star']" v-else/>
 		</BaseButton>
 		<slot />
-	</div>
+	</router-link>
 </template>
 
 <script setup lang="ts">
@@ -284,8 +287,12 @@ function hideDeferDueDatePopup(e) {
 	cursor: pointer;
 	border-radius: $radius;
 	border: 2px solid transparent;
+	
+	color: var(--text);
+	transition: color ease $transition-duration;
 
 	&:hover {
+		color: var(--grey-900);
 		background-color: var(--grey-100);
 	}
 
@@ -331,15 +338,6 @@ function hideDeferDueDatePopup(e) {
 
 	}
 
-	a {
-		color: var(--text);
-		transition: color ease $transition-duration;
-
-		&:hover {
-			color: var(--grey-900);
-		}
-	}
-
 	.favorite {
 		opacity: 0;
 		text-align: center;