fix(task): make sure the drag handle is shown as intended

Due to a previous refactoring, the drag handle was always shown instead of only on hover. The css class was moved out of the task component, but its styles weren't

Related to #3934

src/components/home/ProjectsNavigationItem.vue

@@ -30,7 +30,7 @@
 					</span>
 					<span
 						v-if="project.id > 0"
-						class="icon menu-item-icon handle lines-handle"
+						class="icon menu-item-icon handle"
 						:class="{'has-color-bubble': project.hexColor !== ''}"
 					>
 						<icon icon="grip-lines"/>

src/components/tasks/partials/singleTaskInProject.vue

@@ -2,7 +2,7 @@
 	<div>
 		<div
 			:class="{'is-loading': taskService.loading}"
-			class="task loader-container"
+			class="task loader-container single-task"
 			@mouseup.stop.self="openTaskDetail"
 			@mousedown.stop.self="focusTaskLink"
 			ref="taskContainerRef"
@@ -435,21 +435,12 @@ function focusTaskLink() {
 		}
 	}
 
-	.handle {
-		opacity: 1;
-		transition: opacity $transition;
-		margin-right: .25rem;
-		cursor: grab;
-	}
-
 	@media(hover: hover) and (pointer: fine) {
-		& .favorite,
+		& .favorite {
-		& .handle {
 			opacity: 0;
 		}
 
-		&:hover .favorite,
+		&:hover .favorite {
-		&:hover .handle {
 			opacity: 1;
 		}
 	}

src/views/project/ProjectList.vue

@@ -333,4 +333,23 @@ function prepareFiltersAndLoadTasks() {
 .control.has-icons-right .icon {
 	transition: all $transition;
 }
+
+:deep(.single-task) {
+	.handle {
+		opacity: 1;
+		transition: opacity $transition;
+		margin-right: .25rem;
+		cursor: grab;
+	}
+
+	@media(hover: hover) and (pointer: fine) {
+		& .handle {
+			opacity: 0;
+		}
+
+		&:hover .handle {
+			opacity: 1;
+		}
+	}
+}
 </style>