fix: kanban card spacing (#1005)

Co-authored-by: kolaente <k@knt.li>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Reviewed-on: vikunja/frontend#1005
Co-authored-by: konrad <k@knt.li>
Co-committed-by: konrad <k@knt.li>

src/components/tasks/gantt-component.vue

@@ -500,7 +500,6 @@ $gantt-vertical-border-color: $grey-100;
 
 	.tasks {
 		max-width: unset !important;
-		margin: 0;
 		border-top: $gantt-border;
 
 		.row {

src/components/tasks/partials/kanban-card.vue

@@ -1,5 +1,6 @@
 <template>
 	<div
+		class="task loader-container draggable"
 		:class="{
 			'is-loading': loadingInternal || loading,
 			'draggable': !(loadingInternal || loading),
@@ -9,7 +10,6 @@
 		@click.ctrl="() => toggleTaskDone(task)"
 		@click.exact="() => $router.push({ name: 'task.kanban.detail', params: { id: task.id } })"
 		@click.meta="() => toggleTaskDone(task)"
-		class="task loader-container draggable"
 	>
 		<span class="task-id">
 			<Done class="kanban-card__done" :is-done="task.done" variant="small" />

src/components/tasks/partials/relatedTasks.vue

@@ -319,6 +319,10 @@ export default {
 	margin: 0;
 }
 
+.tasks {
+	padding: .5rem;
+}
+
 .task {
 	display: flex;
 	flex-wrap: wrap;

src/styles/components/tasks.scss

@@ -2,8 +2,6 @@
 // very hard to untangle
 // they have many overwrites at different positions
 .tasks {
-	margin-top: 1rem;
-	padding: 0;
 	text-align: left;
 
 	
@@ -26,19 +24,6 @@
 		margin: 1rem -0.5rem;
 	}
 
-	.task {
-		margin: 0 .5rem;
-	
-		&:first-child {
-			margin-top: .5rem;
-		}
-	
-		&:last-child {
-			margin-bottom: .5rem;
-			border-bottom: none;
-		}
-	}
-
 	.checklist-summary {
 		padding-left: .5rem;
 		font-size: .9rem;

src/views/list/views/Kanban.vue

@@ -636,7 +636,6 @@ $filter-container-height: '1rem - #{$switch-view-height}';
 		.tasks {
 			max-height: calc(#{$crazy-height-calculation-tasks});
 			overflow: auto;
-			margin-top: 0;
 
 			@media screen and (max-width: $tablet) {
 				max-height: calc(#{$crazy-height-calculation-tasks} - #{$filter-container-height});

src/views/list/views/List.vue

@@ -323,6 +323,7 @@ export default {
 
 	.tasks {
 		width: 100%;
+		padding: .5rem;
 
 		.ghost {
 			border-radius: $radius;

src/views/tasks/ShowTasks.vue

@@ -271,6 +271,10 @@ h3 {
 	}
 }
 
+.tasks {
+	padding: .5rem;
+}
+
 .llama-cool {
 	margin-top: 2rem;
 }