chore: cleanup nesting

src/components/tasks/partials/relatedTasks.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="task-relations">
+	<div>
 		<x-button
 			v-if="Object.keys(relatedTasks).length > 0"
 			@click="showNewRelationForm = !showNewRelationForm"
@@ -81,7 +81,7 @@
 
 		<div :key="rts.kind" class="related-tasks" v-for="rts in mappedRelatedTasks">
 			<span class="title">{{ rts.title }}</span>
-			<div class="tasks noborder">
+			<div class="tasks">
 				<div :key="t.id" class="task" v-for="t in rts.tasks">
 					<router-link :to="{ name: $route.name, params: { id: t.id } }" :class="{ 'done': t.done}">
 						<span
@@ -309,63 +309,55 @@ export default {
 	}
 }
 
-.task-relations {
-	.different-list {
-		color: $grey-500;
-		width: auto;
+.different-list {
+	color: $grey-500;
+	width: auto;
+}
+
+.title {
+	font-size: 1rem;
+	margin: 0;
+}
+
+.task {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
+	padding: .75rem;
+	transition: background-color $transition;
+	border-radius: $radius;
+
+	&:hover {
+		background-color: $grey-200;
 	}
 
-	.related-tasks {
-		.title {
-			font-size: 1rem;
-			margin: 0;
-		}
+	a {
+		color: $text;
+		transition: color ease $transition-duration;
 
-		.tasks {
-			margin: 0;
-
-			.task {
-				display: flex;
-				flex-wrap: wrap;
-				justify-content: space-between;
-				padding: .75rem;
-				transition: background-color $transition;
-				border-radius: $radius;
-
-				&:hover {
-					background-color: $grey-200;
-				}
-
-				a {
-					color: $text;
-					transition: color ease $transition-duration;
-
-					&:hover {
-						color: $grey-900;
-					}
-				}
-
-				.remove {
-					text-align: center;
-					color: $red;
-					opacity: 0;
-					transition: opacity $transition;
-				}
-			}
-		}
-
-		&:hover .tasks .task .remove {
-			opacity: 1;
+		&:hover {
+			color: $grey-900;
 		}
 	}
 
-	.none {
-		font-style: italic;
+	.remove {
 		text-align: center;
-	}
-
-	:deep(.multiselect .search-results button) {
-		padding: 0.5rem;
+		color: $red;
+		opacity: 0;
+		transition: opacity $transition;
 	}
 }
+
+.related-tasks:hover .tasks .task .remove {
+	opacity: 1;
+}
+
+.none {
+	font-style: italic;
+	text-align: center;
+}
+
+:deep(.multiselect .search-results button) {
+	padding: 0.5rem;
+}
 </style>