Format tables properly

src/lib/components/Energy/AggregatedFood/AggregatedFoodTable.svelte

@@ -85,13 +85,13 @@
 </script>
 
 <template>
-	<Line data="{data}" />
+	<Line data="{data}" class="max-h-[50vh] h-[50vh]" />
-	<div class="relative flex flex-col h-screen" data-vaul-drawer-wrapper id="page">
+	<div class="relative flex flex-col h-[43vh]" data-vaul-drawer-wrapper id="page">
 		<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
 			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
 				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
 				<tr>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
 						Period
 					</th>
 					<th class="px-6 py-3" scope="col">

src/lib/components/Energy/Food/EmptyFoodComp.svelte

@@ -93,7 +93,5 @@
 		    contenteditable="true"
 		    on:keydown={update}>
 		</td>
-		<td class="px-6 py-4">
-		</td>
 	</tr>
 </template>

src/lib/components/Energy/Food/FoodTable.svelte

@@ -61,22 +61,22 @@
 			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
 				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
 				<tr>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
 						Date
 					</th>
-					<th class="px-6 py-3" scope="col">
+					<th class="px-6 py-3 w-3/12" scope="col">
 						Food
 					</th>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-4/12" scope="col">
 						Description
 					</th>
-					<th class="px-6 py-3" scope="col">
+					<th class="px-6 py-3 w-1/12" scope="col">
 						Amount
 					</th>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-1/12" scope="col">
 						Cal Per 100
 					</th>
-					<th class="px-6 py-3" scope="col">
+					<th class="px-6 py-3 w-1/12" scope="col">
 						Energy
 					</th>
 				</tr>

src/lib/components/Weight/EmptyWeightComp.svelte

@@ -7,9 +7,10 @@
 	let item: Weight = {
 		weight: 0
 	}
-	let weight: string = item.weight.toString()
+	let weight: string | null = null
 
 	async function update(event: KeyboardEvent & { currentTarget: (EventTarget & HTMLTableCellElement) }) {
+		if (!weight) return
 		weight = weight.trim()
 
 		if (event.key == 'Enter') {
@@ -44,7 +45,5 @@
 		    autofocus
 		    on:keydown={update}>
 		</td>
-		<td class="px-6 py-4">
-		</td>
 	</tr>
 </template>

src/lib/components/Weight/WeightTable.svelte

@@ -28,10 +28,10 @@
 			<table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
 				<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
 				<tr>
-					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800" scope="col">
+					<th class="px-6 py-3 bg-gray-50 dark:bg-gray-800 w-2/12" scope="col">
 						Date
 					</th>
-					<th class="px-6 py-3" scope="col">
+					<th class="px-6 py-3 w-10/12" scope="col">
 						Weight
 					</th>
 				</tr>