music: fix tooltip and streak spacing, sort genre tooltip, shorter clock cells

src/lib/music/HoursChart.svelte

@@ -131,12 +131,13 @@
 		>
 			<span class="block font-semibold tabular-nums">{exactHours(tip.hours)}</span>
 			<span class="block text-xs text-[var(--site-muted)]"
-				>{tip.title}{#if tip.plays != null}
-					· {tip.plays.toLocaleString('en-GB')} {tip.plays === 1 ? 'play' : 'plays'}{/if}</span
+				>{tip.title}{tip.plays != null
+					? ` · ${tip.plays.toLocaleString('en-GB')} ${tip.plays === 1 ? 'play' : 'plays'}`
+					: ''}</span
 			>
 			{#if tip.segments?.length}
 				<ul class="mt-1 space-y-0.5 text-xs">
-					{#each [...tip.segments].reverse() as seg (seg.name)}
+					{#each [...tip.segments].sort((x, y) => y.hours - x.hours) as seg (seg.name)}
 						<li class="flex items-center gap-1.5">
 							<span class="size-2 rounded-full" style="background: {seg.color}"></span>
 							{seg.name}