Fix base path

src/lib/components/buttons/CancelButton.svelte

@@ -3,7 +3,7 @@
 
 	/**
 	 * @typedef Props
-	 * @property {string} margin
+	 * @property {string} [margin]
 	 * @property {function():void} onclick
 	 */
 	/** @type {Props} */

src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 	import { fade } from "svelte/transition";
 	import { onMount } from "svelte";
 	import { DarkIcon, LightIcon } from "$lib/components/icons";
+	import {base } from '$app/paths';
 
 	let { children } = $props();
 
@@ -31,12 +32,9 @@
 	});
 
 	const sections = [
-		{ name: '⏱  Timers', href: '/time-tracker/' },
-		{ name: '✔ Todos', href: '/time-tracker/todos' }
+		{ name: '⏱  Timers', href: `${base}/` },
+		{ name: '✔ Todos', href: `${base}/todos` }
 	];
-
-	const basePath = 'time-tracker';
-	$effect(() => console.log("base path" + basePath));
 </script>
 
 <div class="header">

src/routes/+page.svelte

@@ -246,8 +246,7 @@
 		display: block;
 	}
 	.total-time {
-		font-size: 1em;
-		margin-right: 10px;
+		margin: 0 10px 0 0;
 	}
 	.fixed-width {
 		display: inline-block;

src/routes/todos/+page.svelte

@@ -115,14 +115,12 @@
 				use:blurOnEscape
 				bind:value={item.content}
 			/>
-			<CancelButton
-				onclick={() => deleteTodo(item.id)}
-				margin="0 0 0 0"
-			/>
+			<CancelButton onclick={() => deleteTodo(item.id)} />
 		</div>
 	{/each}
-
-	<AddButton onclick={createTodo} text="Add todo" />
+	<div class="todo-add">
+		<AddButton onclick={createTodo} text="Add todo" />
+	</div>
 </div>
 
 <style>
@@ -146,4 +144,10 @@
 		width: 50%;
 		min-width: 200px;
 	}
+	.todo-add {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 100%;
+	}
 </style>