Fixing column width, making table columns equal

Author: chantalwuer

src/lib/Sidebar.svelte

@@ -1,11 +1,14 @@
 <script lang="ts">
+	import clsx from 'clsx';
+
 	interface Props {
+		className?: string;
 		children?: import('svelte').Snippet;
 	}
 
-	let { children }: Props = $props();
+	let { children, className}: Props = $props();
 </script>
 
-<div id="sidebar" class="flex h-full w-1/3 flex-col place-content-stretch gap-4 2xl:w-1/4">
+<div id="sidebar" class={clsx("flex h-full w-1/3 flex-col place-content-stretch gap-4 2xl:w-1/4", className)}>
 	{@render children?.()}
 </div>

src/lib/StatsTable.svelte

@@ -25,8 +25,8 @@
 	const grandfatheringColor = 'text-gray-400';
 </script>
 
-<div class="rounded px-12 py-8">
-	<table class="prose w-full max-w-none table-auto">
+<div class="rounded px-12 py-6">
+	<table class="prose w-full max-w-none table-fixed">
 		<thead>
 			<tr>
 				<th>Allocation method</th>

src/routes/regions/[region]/+page.svelte

@@ -139,7 +139,7 @@
 </script>
 
 <div class="flex h-full flex-row gap-4">
-	<Sidebar>
+	<Sidebar className="min-w-fit">
 		<GlobalBudgetCard
 			remaining={data.global.budget.remaining}
 			relative={data.global.budget.relative}