From 07b98fc0e393b860fc86bbc701eba4d72f1a557f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Thu, 7 Mar 2024 16:38:29 +0100
Subject: [PATCH] style: change test layout

---
 src/routes/(pages)/+page.svelte | 37 ++++++++++++++++-----------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/routes/(pages)/+page.svelte b/src/routes/(pages)/+page.svelte
index 46cce32..cdd5758 100644
--- a/src/routes/(pages)/+page.svelte
+++ b/src/routes/(pages)/+page.svelte
@@ -201,17 +201,15 @@
 			{#if tests.filter((test) => test.categories.includes(category.id)).length > 0}
 				<h2>{$i18n.t(category.label)}</h2>
 				{#each filteredTests.filter((test) => test.categories.includes(category.id) && filteredCategories.every( (f) => test.categories.includes(f) )) as test}
-					<div class="test" class:disabled={test.disabled}>
-						<a class="test" href={test.id}>
-							<span class="label">
-								<i class="ti {test.icon}"></i>
-								{$i18n.t(test.label)}
-							</span>
-							<span class="description">
-								{$i18n.t(`tests.${test.id}.description`)}
-							</span>
-						</a>
-					</div>
+					<a class="test" href={test.id} class:disabled={test.disabled}>
+						<i class="ti {test.icon}"></i>
+						<div class="label">
+							{$i18n.t(test.label)}
+						</div>
+						<div class="description">
+							{$i18n.t(`tests.${test.id}.description`)}
+						</div>
+					</a>
 				{/each}
 			{/if}
 		{:else}
@@ -292,21 +290,22 @@
 	}
 
 	.test {
-		display: flex;
-		gap: 0.5em;
+		display: grid;
+		grid-template-columns: auto 1fr;
+		align-items: center;
+		gap: 0 0.25em;
 		margin-bottom: 0.25em;
 
+		text-decoration: none;
+		color: inherit;
+
 		& .label {
 			white-space: nowrap;
 		}
 
 		& .description {
-			opacity: 0.85;
-		}
-
-		& a {
-			text-decoration: none;
-			color: inherit;
+			opacity: 0.8;
+			grid-column-start: 2;
 		}
 
 		&.disabled {