From b60994a984b7586522486f521033862674886082 Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Fri, 12 Jan 2024 00:39:22 +0100
Subject: [PATCH] Move ID to top right

---
 frontend/src/lib/components/card/Card.svelte | 32 ++++++++++++++------
 1 file changed, 23 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/card/Card.svelte b/frontend/src/lib/components/card/Card.svelte
index 1aa623f..ab55464 100644
--- a/frontend/src/lib/components/card/Card.svelte
+++ b/frontend/src/lib/components/card/Card.svelte
@@ -19,7 +19,10 @@
 		if (e.key === 'Enter') showModal = true;
 	}}
 >
-	<div class="title">{card.id} - {card.title}</div>
+	<div class="header">
+		<div class="title">{card.title}</div>
+		<div class="id">#{card.id}</div>
+	</div>
 	<div class="tags">
 		{#each card.cardTags as tag}
 			{#if tag.option}
@@ -43,27 +46,38 @@
 		font-family: 'Open Sans', sans-serif;
 		font-size: 14px;
 		margin-bottom: 10px;
+
+		&:hover {
+			background-color: #303030;
+			cursor: pointer;
+		}
 	}
 
-	.card:hover {
-		background-color: #303030;
-		cursor: pointer;
-	}
-
-	.card .title {
+	.title {
 		font-weight: normal;
 	}
 
-	.card .tags {
+	.tags {
 		padding-top: 10px;
 		font-weight: lighter;
 	}
 
-	.card .tag {
+	.tag {
 		padding: 2px 8px;
 		margin: 4px 4px 0 0;
 		text-transform: uppercase;
 		border-radius: 3px;
 		font-size: 90%;
 	}
+
+	.header {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+
+		.id {
+			font-size: 80%;
+			color: #fff5;
+		}
+	}
 </style>