From e0cfdc34b5f51ebf1ae268c15b17bc6c07d87e21 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Thu, 18 Jul 2024 00:33:41 +0800
Subject: [PATCH] problem: products are not stacked vertically

---
 src/components/ProductCard.svelte | 6 +++---
 src/components/ProductFomo.svelte | 5 +----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/ProductCard.svelte b/src/components/ProductCard.svelte
index ff4fca6..520fbd3 100644
--- a/src/components/ProductCard.svelte
+++ b/src/components/ProductCard.svelte
@@ -54,11 +54,11 @@
 
 		{#if $$slots.default}
 			<Card.Content>
-				<div class="flex flex-col items-center justify-center gap-2 sm:flex-row">
+				<div class="flex flex-col items-center justify-center gap-2 md:flex-row">
 					<img
 						src={product.getMatchingTags('cover')[0][1]}
 						alt="cover"
-						class="aspect-square w-[200px] object-cover"
+						class="aspect-square w-[300px] object-cover"
 					/>
 					<slot />
 				</div>
@@ -70,7 +70,7 @@
 				class="aspect-square object-cover"
 			/>
 		{/if}
-		<Card.Footer class="flex justify-between pt-2">
+		<Card.Footer class="flex justify-center pt-2">
 			{#if !includedInRocket()}
 				<AddProductToRocket {product} {rocket} />
 			{:else}
diff --git a/src/components/ProductFomo.svelte b/src/components/ProductFomo.svelte
index 23c5757..ae432a9 100644
--- a/src/components/ProductFomo.svelte
+++ b/src/components/ProductFomo.svelte
@@ -26,10 +26,7 @@
 		<Card.Title>Products and Purchases</Card.Title>
 		<Card.Description></Card.Description>
 	</Card.Header>
-	<Card.Content
-		class="grid gap-2"
-		style="grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 400px), 1fr));"
-	>
+	<Card.Content class="grid grid-cols-1 gap-2">
 		{#each $products as product}
 			<div>
 				<ProductCardFromId {rocket} productID={product.ID}>