Fix CSS Flexbox de la liste des évènements (#105)

cedricr · May 8, 2023 · 0e1792b · 0e1792b
1 parent 0c04c84
commit 0e1792b
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/src/lib/event.svelte b/src/lib/event.svelte
@@ -13,29 +13,29 @@
 	}
 </script>
 
-<li class="mb-8 flex flex-row">
+<li class="mb-8 sm:flex sm:flex-row">
 	<div class="w-20 shrink-0">
 		{#if !hideDate}<strong>{getDateLabel(event.date)}</strong>{/if}
-		<span class="font-bold text-[#dd0220]">{@html getPointsDisplay(event.score)}</span><br />
+		<span class="font-bold text-[#dd0220]">{@html getPointsDisplay(event.score)}</span>
 	</div>
 	<div>
 		<span class="font-bold">{event.ville}&nbsp;:</span>
 		{event.description}
-		<div class="mt-1 flex flex-wrap gap-1">
+		<div class="mt-1 flex-wrap gap-1 sm:flex">
 			{#each event.actions as action}
 				<div class="tag action">
 					{ACTION_LABEL[action]}&nbsp;: {@html getPointsDisplay(ACTION_SCORE[action])}
 				</div>
 			{/each}
 		</div>
-		<div class="mt-1 flex flex-wrap gap-1">
+		<div class="mt-1 flex-wrap gap-1 sm:flex">
 			{#each event.cibles as target}
 				<div class="tag target">
 					{TARGET_LABEL[target.role.code]}&nbsp;: x{TARGET_MULTIPLIER[target.role.code]}
 				</div>
 			{/each}
 		</div>
-		<div class="mt-1 flex flex-wrap gap-1">
+		<div class="mt-1 flex-wrap gap-1 sm:flex">
 			{#each liens as link}
 				<div class="tag target">
 					<a href={link.url}>{link.text}</a>
@@ -47,7 +47,7 @@
 
 <style lang="postcss">
 	.tag {
-		@apply whitespace-nowrap py-0.5 pr-2 text-xs font-bold;
+		@apply py-0.5 pr-2 text-xs font-bold;
 	}
 
 	.action {