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}

src/routes/trackers/music/+page.svelte

@@ -92,6 +92,11 @@
 		clockHover = { dow, hour };
 	}
 	const maxDiscovered = $derived(Math.max(1, ...s.discoveredByYear.map((d) => d.artists)));
+	const longestRange = $derived(
+		s.streak.longestStart && s.streak.longestEnd && s.streak.longest > 1
+			? ` (${date(s.streak.longestStart, { day: 'numeric', month: 'short', year: 'numeric' })} – ${date(s.streak.longestEnd, { day: 'numeric', month: 'short', year: 'numeric' })})`
+			: ''
+	);
 	const perDay = $derived(s.totals.hours / Math.max(1, s.totals.spanDays));
 	const sourceLabel: Record<string, string> = {
 		spotify: 'Spotify',
@@ -201,13 +206,9 @@
 				<dd>
 					{s.streak.current} day{s.streak.current === 1 ? '' : 's'}
 					<span class="sub"
-						>longest {s.streak.longest}{#if s.streak.longestStart && s.streak.longest > 1}
-							({shortDay(s.streak.longestStart)}
-							{date(s.streak.longestStart, {
-								year: 'numeric'
-							})}–{shortDay(s.streak.longestEnd ?? '')}
-							{date(s.streak.longestEnd ?? s.streak.longestStart, { year: 'numeric' })}){/if}
-						· listened {nf(s.totals.daysListened)} of {nf(s.totals.spanDays)} days</span
+						>longest {s.streak.longest}{longestRange} · listened {nf(s.totals.daysListened)} of {nf(
+							s.totals.spanDays
+						)} days</span
 					>
 				</dd>
 			</div>
@@ -444,7 +445,7 @@
 					<span class="self-center text-[var(--site-muted)]">{DAYS[d]}</span>
 					{#each row as cell, h (h)}
 						<span
-							class="aspect-square rounded-sm"
+							class="h-4 rounded-sm sm:h-5"
 							style="background: {cell.hours
 								? `color-mix(in srgb, #1db954 ${Math.round(15 + (cell.hours / maxCell) * 85)}%, transparent)`
 								: 'var(--site-border)'}"