fix: rockets dashboard UI

src/components/MeritRequests.svelte

@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { base } from '$app/paths';
 	import Badge from '@/components/ui/badge/badge.svelte';
+	import Button from '@/components/ui/button/button.svelte';
 	import * as Card from '@/components/ui/card';
 	import * as Table from '@/components/ui/table';
 	import { MapOfMeritResult, MeritRequest } from '@/event_helpers/merits';
@@ -33,7 +34,7 @@
 		_votes?.unsubscribe();
 	});
 
-	let truncate = writable(true)
+	let truncate = writable(true);
 
 	let merits = derived(_merits, ($merits) => {
 		let map = new Map<string, MeritRequest>();
@@ -138,16 +139,14 @@
 						<Table.Cell class="hidden text-right md:table-cell"
 							>{unixToRelativeTime(merit.TimeStamp * 1000)}</Table.Cell
 						>
-						
 					</Table.Row>
 				{/each}
 				{#if $merits.size > $meritsTruncated.length}
-					<span
+					<Button
+						class="mt-2 rounded-full"
 						on:click={() => {
-							truncate.set(false)
-						}}
-						class="m-2 flex w-48 flex-nowrap text-lg"
-						><Badge href="#">View {$merits.size - $meritsTruncated.length} more</Badge></span
+							truncate.set(false);
+						}}>View {$merits.size - $meritsTruncated.length} more</Button
 					>
 				{/if}
 			</Table.Body>

src/components/MeritsAndSatflow.svelte

@@ -76,44 +76,34 @@
 <Card.Root class="sm:col-span-3">
 	<Card.Header class="pb-3">
 		<Card.Title>Merits and Satflow</Card.Title>
-		<Card.Description class="grid grid-cols-1 sm:grid-cols-2">
-			<div class="grid-cols-1">
+		<Card.Description class="grid grid-cols-1 lg:grid-cols-2">
+			<div class="col-span-1">
 				This graph displays the Meritization of equity in {rocket.Name()}
 				<Pie data={$merits} />
 			</div>
-			<div class="grid-cols-1 text-black">
-				<Table.Root>
-					<Table.Header>
-						<Table.Row class="">
-							<Table.Head>Participant</Table.Head>
-							<Table.Head class="hidden md:table-cell">Merits</Table.Head>
-							<Table.Head class="text-right">Revenue (Sats)</Table.Head>
+			<Table.Root class="col-span-1 text-black">
+				<Table.Header>
+					<Table.Row class="">
+						<Table.Head>Participant</Table.Head>
+						<Table.Head class="hidden md:table-cell">Merits</Table.Head>
+						<Table.Head class="text-right">Revenue (Sats)</Table.Head>
+					</Table.Row>
+				</Table.Header>
+				<Table.Body>
+					{#each $merits as { pubkey, merits, sats }, i (pubkey)}
+						<Table.Row class="{c(i)} hover:{c(i)} hover:brightness-125 hover:contrast-150">
+							<Table.Cell>
+								<div class="flex flex-nowrap items-center gap-2">
+									<Avatar ndk={$ndk} {pubkey} class="h-8 w-8 flex-none rounded-full object-cover" />
+									<Name ndk={$ndk} {pubkey} class="hidden max-w-32 truncate p-1 md:inline-block" />
+								</div>
+							</Table.Cell>
+							<Table.Cell class="hidden md:table-cell">{merits}</Table.Cell>
+							<Table.Cell class="text-right">{sats}</Table.Cell>
 						</Table.Row>
-					</Table.Header>
-					<Table.Body>
-						{#each $merits as { pubkey, merits, sats }, i (pubkey)}
-							<Table.Row class="{c(i)} hover:{c(i)} hover:brightness-125 hover:contrast-150">
-								<Table.Cell>
-									<div class="flex flex-nowrap items-center gap-2">
-										<Avatar
-											ndk={$ndk}
-											{pubkey}
-											class="h-8 w-8 flex-none rounded-full object-cover"
-										/>
-										<Name
-											ndk={$ndk}
-											{pubkey}
-											class="hidden max-w-32 truncate p-1 md:inline-block"
-										/>
-									</div>
-								</Table.Cell>
-								<Table.Cell class="hidden md:table-cell">{merits}</Table.Cell>
-								<Table.Cell class="text-right">{sats}</Table.Cell>
-							</Table.Row>
-						{/each}
-					</Table.Body>
-				</Table.Root>
-			</div>
+					{/each}
+				</Table.Body>
+			</Table.Root>
 		</Card.Description>
 	</Card.Header>
 	<Card.Footer></Card.Footer>

src/components/RocketDashboard.svelte

@@ -44,8 +44,8 @@
 		<BitcoinAssociations rocket={new Rocket(rocket)} />
 		<Card.Root class="sm:col-span-3">
 			<Card.Header class="pb-3">
-				<Card.Title>Actions</Card.Title>
-				<Card.Description class="flex space-x-4">
+				<Card.Title class="pb-4">Actions</Card.Title>
+				<Card.Description class="flex flex-wrap gap-2">
 					<UpdateMission rocketEvent={rocket} />
 					<CreateNewProduct rocketEvent={rocket} />
 					<CreateMeritRequest rocketEvent={rocket} />
@@ -59,6 +59,9 @@
 			<Card.Footer></Card.Footer>
 		</Card.Root>
 
-		<Todo text={['delete rocket (if current user is rocket creator) - publish deletion request']} />
+		<Todo
+			className="sm:col-span-3"
+			text={['delete rocket (if current user is rocket creator) - publish deletion request']}
+		/>
 	</main>
 </div>

src/components/Todo.svelte

@@ -2,9 +2,10 @@
 	import Terminal from 'lucide-svelte/icons/terminal';
 	import * as Alert from '$lib/components/ui/alert/index.js';
 	export let text: string[];
+	export let className: string = '';
 </script>
 
-<Alert.Root>
+<Alert.Root class={className}>
 	<Terminal class="h-4 w-4" />
 	<Alert.Title>Todo:</Alert.Title>
 	<Alert.Description>