chore: simplify task title markup

src/components/tasks/partials/relatedTasks.vue

@@ -83,8 +83,7 @@
 			<span class="title">{{ rts.title }}</span>
 			<div class="tasks noborder">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
-					<router-link :to="{ name: $route.name, params: { id: t.id } }">
-						<span :class="{ 'done': t.done}" class="tasktext">
+					<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
 						<span
 							class="different-list"
 							v-if="t.listId !== listId"
@@ -101,7 +100,6 @@
 							</span>
 						</span>
 						{{ t.title }}
-						</span>
 					</router-link>
 					<a
 						@click="() => {showDeleteModal = true; relationToDelete = {relationKind: rts.kind, otherTaskId: t.id}}"
@@ -345,25 +343,16 @@ $remove-icon-width: 24px;
 				width: calc(100% - #{$remove-icon-width});
 			}
 
-			.task .tasktext {
-				width: calc(100% - .25rem); // Magic .25rem extra space
-			}
-
-			.remove {
-				width: $remove-icon-width;
-				text-align: center;
-			}
-		}
-
 			.task {
 				display: flex;
 				flex-wrap: wrap;
-			padding: .4rem;
+				padding: .75rem;
 				transition: background-color $transition;
-			align-items: center;
-			cursor: pointer;
 				border-radius: $radius;
-			border: 2px solid transparent;
+
+				&:hover {
+					background-color: $grey-200;
+				}
 
 				a {
 					color: $text;
@@ -375,10 +364,13 @@ $remove-icon-width: 24px;
 				}
 
 				.remove {
+					width: $remove-icon-width;
+					text-align: center;
 					color: $red;
 				}
 			}
 		}
+	}
 
 	.none {
 		font-style: italic;