From f13bea70759d2bfde5853807808b21525e622834 Mon Sep 17 00:00:00 2001
From: Angelica Willianto <angelicawillianto@gmail.com>
Date: Mon, 12 Aug 2024 12:06:42 +0700
Subject: [PATCH] feat(ui): improve rockets dashboard page

---
 src/components/RocketCard.svelte   | 6 +++---
 src/layouts/SidePanelLayout.svelte | 2 +-
 src/views/rockets/Rockets.svelte   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/RocketCard.svelte b/src/components/RocketCard.svelte
index a39817e..4bd3132 100644
--- a/src/components/RocketCard.svelte
+++ b/src/components/RocketCard.svelte
@@ -13,7 +13,7 @@
 	//$page.url.searchParams.get("tab")
 </script>
 
-<Card.Root class="flex w-[350px] flex-col justify-between">
+<Card.Root class="flex flex-col justify-between">
 	<Card.Header>
 		<Card.Title>{rocket.Name()}</Card.Title>
 		<Card.Description>{rocket.Mission()}</Card.Description>
@@ -29,7 +29,7 @@
 		</div>
 	</Card.Content>
 	<Card.Footer>
-		<div class="flex justify-between gap-2">
+		<div class="flex flex-wrap justify-between gap-2 lg:gap-1">
 			<Button
 				on:click={() => {
 					console.log(rocket.Event.rawEvent());
@@ -39,7 +39,7 @@
 			<Button
 				on:click={() => {
 					goto(`${base}/rockets/${rocket.URL()}`);
-				}}>View Full Rocket<ChevronRight class="h-4 w-4" /></Button
+				}}>View Full Rocket <ChevronRight class="h-4 w-4" /></Button
 			>
 		</div>
 	</Card.Footer>
diff --git a/src/layouts/SidePanelLayout.svelte b/src/layouts/SidePanelLayout.svelte
index f0e0e15..494946c 100644
--- a/src/layouts/SidePanelLayout.svelte
+++ b/src/layouts/SidePanelLayout.svelte
@@ -16,7 +16,7 @@
 	export let title = '';
 </script>
 
-<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
+<div class="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[260px_1fr]">
 	<div class="hidden border-r bg-muted/40 md:block">
 		<div class="flex h-full max-h-screen flex-col gap-2">
 			<div class="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
diff --git a/src/views/rockets/Rockets.svelte b/src/views/rockets/Rockets.svelte
index 4c96f20..0426f7c 100644
--- a/src/views/rockets/Rockets.svelte
+++ b/src/views/rockets/Rockets.svelte
@@ -74,7 +74,7 @@
 			<Tabs.Trigger value="testnet">Testnet</Tabs.Trigger>
 		</Tabs.List>
 		<Tabs.Content value="mainnet">
-			<div class="grid gap-2" style="grid-template-columns: repeat(auto-fit, 350px);">
+			<div class="grid grid-cols-1 gap-2 md:grid-cols-2 2xl:grid-cols-3">
 				{#each mainnet as rocket (`${rocket.Event.pubkey}${rocket.Name()}`)}
 					<RocketCard {rocket} />
 				{/each}
@@ -89,7 +89,7 @@
 					intended solely for testing.</Alert.Description
 				>
 			</Alert.Root>
-			<div class="grid gap-2" style="grid-template-columns: repeat(auto-fit, 350px);">
+			<div class="grid grid-cols-1 gap-2 md:grid-cols-2 2xl:grid-cols-3">
 				{#each testnet as rocket (`${rocket.Event.pubkey}${rocket.Name()}`)}
 					<RocketCard {rocket} />
 				{/each}