fix: rockets dashboard

src/components/MeritsAndSatflow.svelte

@@ -76,7 +76,7 @@
 <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-2">
+		<Card.Description class="grid grid-cols-1 sm:grid-cols-2">
 			<div class="grid-cols-1">
 				This graph displays the Meritization of equity in {rocket.Name()}
 				<Pie data={$merits} />

src/components/RocketDashboard.svelte

@@ -19,7 +19,7 @@
 	$: unratifiedZaps = new Map<string, number>();
 </script>
 
-<div class="flex flex-col sm:gap-4">
+<div class="flex flex-col gap-4">
 	<header class="flex items-center">
 		<Breadcrumb.Root class="flex">
 			<Breadcrumb.List>
@@ -33,7 +33,7 @@
 			</Breadcrumb.List>
 		</Breadcrumb.Root>
 	</header>
-	<main class="grid flex-1 items-start gap-4 md:gap-2 lg:grid-cols-3 xl:grid-cols-3">
+	<main class="grid w-full flex-1 grid-cols-1 items-start gap-4 sm:grid-cols-3 md:gap-2">
 		<MeritsAndSatflow {unratifiedZaps} rocket={new Rocket(rocket)} />
 
 		<ProductFomo bind:unratifiedZaps rocket={new Rocket(rocket)} />

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 grid-cols-1 gap-2 md:grid-cols-2 2xl:grid-cols-3">
+			<div class="grid grid-cols-1 gap-2 md:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4">
 				{#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 grid-cols-1 gap-2 md:grid-cols-2 2xl:grid-cols-3">
+			<div class="grid grid-cols-1 gap-2 md:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4">
 				{#each testnet as rocket (`${rocket.Event.pubkey}${rocket.Name()}`)}
 					<RocketCard {rocket} />
 				{/each}

tailwind.config.ts

@@ -14,10 +14,12 @@ const config: Config = {
 			center: true,
 			padding: '2rem',
 			screens: {
-				'2xl': '1400px'
+				'2xl': '1400px',
+				'3xl': '1750px'
 			}
 		},
 		extend: {
+			screens: { '2xl': '1400px', '3xl': '1750px' },
 			colors: {
 				border: 'hsl(var(--border) / <alpha-value>)',
 				input: 'hsl(var(--input) / <alpha-value>)',