feat(kanban): reorder items on kanban task card

This makes the items on the kanban task card flow more visually logical and look nicer overall.

frontend/src/components/tasks/partials/KanbanCard.vue

@@ -19,8 +19,8 @@
 			class="tw-w-full"
 		>
 		<div class="p-2">
-			<div class="task-id tw-flex tw-justify-between">
-				<div>
+			<div class="tw-flex tw-justify-between">
+				<span class="task-id">
 					<Done
 						class="kanban-card__done"
 						:is-done="task.done"
@@ -38,25 +38,30 @@
 					>
 						{{ task.position }}
 					</span>
-				</div>
-				<div v-if="projectTitle">
-					{{ projectTitle }}
-				</div>
-			</div>
-			<span
-				v-if="task.dueDate > 0"
-				v-tooltip="formatDateLong(task.dueDate)"
-				:class="{'overdue': isOverdue}"
-				class="due-date"
-			>
-				<span class="icon">
-					<Icon :icon="['far', 'calendar-alt']" />
 				</span>
-				<time :datetime="formatISO(task.dueDate)">
-					{{ formatDisplayDate(task.dueDate) }}
-				</time>
-			</span>
+				<span
+					v-if="task.dueDate > 0"
+					v-tooltip="formatDateLong(task.dueDate)"
+					:class="{'overdue': isOverdue}"
+					class="due-date"
+				>
+					<span class="icon">
+						<Icon :icon="['far', 'calendar-alt']" />
+					</span>
+					<time :datetime="formatISO(task.dueDate)">
+						{{ formatDisplayDate(task.dueDate) }}
+					</time>
+				</span>
+			</div>
+			
 			<h3>{{ task.title }}</h3>
+			
+			<span
+				v-if="projectTitle"
+				class="project-title"
+			>
+				{{ projectTitle }}
+			</span>
 
 			<ProgressBar
 				v-if="task.percentDone > 0"
@@ -70,15 +75,6 @@
 					:done="task.done"
 					class="is-inline-flex is-align-items-center"
 				/>
-				<AssigneeList
-					v-if="task.assignees.length > 0"
-					:assignees="task.assignees"
-					:avatar-size="24"
-				/>
-				<ChecklistSummary
-					:task="task"
-					class="checklist"
-				/>
 				<span
 					v-if="task.attachments.length > 0"
 					class="icon"
@@ -101,6 +97,15 @@
 				>
 					<Icon icon="history" />
 				</span>
+				<AssigneeList
+					v-if="task.assignees.length > 0"
+					:assignees="task.assignees"
+					:avatar-size="24"
+				/>
+				<ChecklistSummary
+					:task="task"
+					class="checklist"
+				/>
 			</div>
 		</div>
 	</div>
@@ -264,6 +269,7 @@ $task-background: var(--white);
 		display: flex;
 		align-items: center;
 		padding: 0 .25rem;
+		font-size: .85rem;
 
 		.icon {
 			margin-inline-end: .25rem;
@@ -324,7 +330,7 @@ $task-background: var(--white);
 		padding: 0 .5rem;
 	}
 
-	.task-id {
+	.task-id, .project-title {
 		color: var(--grey-500);
 		font-size: .8rem;
 		margin-block-end: .25rem;