problem: style isn't good on small screens

package.json

@@ -3,7 +3,7 @@
 	"version": "0.0.1",
 	"private": true,
 	"scripts": {
-		"dev": "vite dev",
+		"dev": "vite dev --host",
 		"build": "vite build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",

src/components/MeritRequests.svelte

@@ -137,7 +137,9 @@
 						</Table.Cell>
 						<Table.Cell class="table-cell">{merit.Sats}</Table.Cell>
 						<Table.Cell class="table-cell">{merit.Merits}</Table.Cell>
-						<Table.Cell class="table-cell text-center">{status(merit).toUpperCase()}</Table.Cell>
+						<Table.Cell class="hidden text-center md:table-cell"
+							>{status(merit).toUpperCase()}</Table.Cell
+						>
 						<Table.Cell class="hidden text-right md:table-cell"
 							>{unixToRelativeTime(merit.TimeStamp * 1000)}</Table.Cell
 						>

src/components/MeritsAndSatflow.svelte

@@ -86,7 +86,7 @@
 				<Table.Header>
 					<Table.Row class="">
 						<Table.Head>Participant</Table.Head>
-						<Table.Head class="hidden md:table-cell">Merits</Table.Head>
+						<Table.Head class="table-cell">Merits</Table.Head>
 						<Table.Head class="text-right">Revenue (Sats)</Table.Head>
 					</Table.Row>
 				</Table.Header>
@@ -99,10 +99,14 @@
 									<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">
+							<Table.Cell
+								class="table-cell text-pretty font-mono font-extrabold text-white dark:text-gray-900"
+							>
 								<NumberIncrement targetValue={merits} />
 							</Table.Cell>
-							<Table.Cell class="text-right">
+							<Table.Cell
+								class="table-cell text-pretty text-right font-mono font-extrabold text-white dark:text-gray-900"
+							>
 								<NumberIncrement targetValue={sats} />
 							</Table.Cell>
 						</Table.Row>

src/components/NotifyMe.svelte

@@ -121,7 +121,7 @@
 				{/if}
 			</div>
 			<Button disabled={emailInValid} on:click={SubmitEmailAndSubscribe}
-				>{emailError ? emailError : "I'm lame, please email me with updates"}</Button
+				>{emailError ? emailError : 'Please email me with updates'}</Button
 			>
 			<Separator />
 			<a href="https://t.me/nostrocket" class="flex flex-nowrap">

src/components/NumberIncrement.svelte

@@ -3,9 +3,9 @@
 	import { expoInOut } from 'svelte/easing';
 	import { tweened } from 'svelte/motion';
 
-	export let targetValue: number = 0;
+	export let targetValue: number;
 
-	let currentValue = tweened(0, { duration: 1000, easing: expoInOut });
+	let currentValue = tweened(0, { duration: 3000, easing: expoInOut });
 
 	// Re-trigger animation whenever targetValue changes
 	$: if (targetValue !== undefined && targetValue !== null) {
@@ -17,4 +17,4 @@
 	});
 </script>
 
-<span class="merits">{$currentValue.toFixed(0)}</span>
+<span class="merits">{Math.floor($currentValue).toLocaleString()}</span>