minor fixes

Author: MichaelHolley

src/lib/components/Habit/HabitSummaryComponent.svelte

@@ -7,24 +7,22 @@
 	const thirtyDaysAgo = dayjs().subtract(30, 'days');
 </script>
 
-{#snippet summaryDateLabel(date: dayjs.Dayjs, spanDays: number)}
-	<div class="col-span-{spanDays}">
-		<div>{date.format('DD')}</div>
-		<div>{date.format(' MMM')}</div>
-	</div>
+{#snippet summaryDateLabel(date: dayjs.Dayjs)}
+	<div>{date.format('DD')}</div>
+	<div>{date.format(' MMM')}</div>
 {/snippet}
 
 <div class="flex flex-shrink">
 	<div class="overflow-hidden rounded-lg bg-base-200 p-4">
 		<div class="relative grid items-center gap-1 overflow-x-scroll pb-4 text-[0.5rem]">
 			<div class="col-span-1"></div>
-			{@render summaryDateLabel(thirtyDaysAgo.add(1, 'day'), 5)}
-			{@render summaryDateLabel(thirtyDaysAgo.add(6, 'day'), 5)}
-			{@render summaryDateLabel(thirtyDaysAgo.add(11, 'day'), 5)}
-			{@render summaryDateLabel(thirtyDaysAgo.add(16, 'day'), 5)}
-			{@render summaryDateLabel(thirtyDaysAgo.add(21, 'day'), 5)}
-			{@render summaryDateLabel(thirtyDaysAgo.add(26, 'day'), 4)}
-			{@render summaryDateLabel(thirtyDaysAgo.add(30, 'day'), 1)}
+			<div class="col-span-5">{@render summaryDateLabel(thirtyDaysAgo.add(1, 'day'))}</div>
+			<div class="col-span-5">{@render summaryDateLabel(thirtyDaysAgo.add(6, 'day'))}</div>
+			<div class="col-span-5">{@render summaryDateLabel(thirtyDaysAgo.add(11, 'day'))}</div>
+			<div class="col-span-5">{@render summaryDateLabel(thirtyDaysAgo.add(16, 'day'))}</div>
+			<div class="col-span-5">{@render summaryDateLabel(thirtyDaysAgo.add(21, 'day'))}</div>
+			<div class="col-span-4">{@render summaryDateLabel(thirtyDaysAgo.add(26, 'day'))}</div>
+			<div class="col-span-1">{@render summaryDateLabel(thirtyDaysAgo.add(30, 'day'))}</div>
 
 			{#each summary as summaryItem}
 				<a class="link-hover link link-primary sticky left-0 mr-2 text-sm" href="/{summaryItem.id}"

src/routes/(app)/+layout.svelte

@@ -10,12 +10,12 @@
 <div class="container mx-auto px-3 py-8">
 	<div class="mb-7 flex flex-row items-center justify-between">
 		<span class="text-4xl font-bold text-primary">Habit<span class="text-accent">Kit</span></span>
-		<div class="flex flex-col">
+		<div class="text-right">
 			<span class="text-xs">
-				Logged in as <span class="text-accent">{data.user?.username ?? 'UNDEFINED'}</span>
+				Logged in as <span class="text-primary">{data.user?.username ?? 'UNDEFINED'}</span>
 			</span>
 			<form method="post" action="?/logout" use:enhance>
-				<button class="text-md btn btn-link btn-accent btn-xs px-0">Sign out</button>
+				<button class="text-md btn btn-link link-accent btn-xs px-0">Sign out</button>
 			</form>
 		</div>
 	</div>

src/routes/(app)/+page.svelte

@@ -13,12 +13,11 @@
 	</div>
 
 	<div class="my-6">
-		<h3 class="mb-3 text-xl">Last 30 Days</h3>
+		<h3 class="mb-2 text-xl">Last 30 Days</h3>
 		<LastXDays summary={data.summary} />
 	</div>
 
 	<div class="my-6">
-		<h3 class="mb-3 text-xl">Overview</h3>
 		<div class="flex flex-row flex-wrap justify-start gap-6">
 			{#each data.habits as habit}
 				<HabitOverviewItem {habit} />