style: change test layout

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">
+					<a class="test" href={test.id} class:disabled={test.disabled}>
 						<i class="ti {test.icon}"></i>
+						<div class="label">
 							{$i18n.t(test.label)}
-							</span>
-							<span class="description">
-								{$i18n.t(`tests.${test.id}.description`)}
-							</span>
-						</a>
 						</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 {