problem: product and purchase layout is misaligned for desktop view

Time spent: 1 hour

src/components/Heading.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	export let title: string;
+	export let title: string | undefined;
 </script>
 
-<div class="mb-4 flex items-center">
+{#if title}
-	<h1 class="scroll-m-20 text-xl font-semibold tracking-tight md:text-3xl">
+	<div class="my-4 flex items-center">
-		{title}
+		<h1 class="scroll-m-20 text-xl font-semibold tracking-tight md:text-3xl">
-	</h1>
+			{title}
-</div>
+		</h1>
+	</div>
+{/if}

src/components/ProductCard.svelte

@@ -46,16 +46,31 @@
 </script>
 
 {#if validate(product)}
-	<Card.Root class="m-2 w-[450px]">
+	<Card.Root>
 		<Card.Header>
 			<Card.Title>{product.getMatchingTags('name')[0][1]}</Card.Title>
 			<Card.Description>{product.getMatchingTags('description')[0][1]}</Card.Description>
 		</Card.Header>
-		<img src={product.getMatchingTags('cover')[0][1]} alt="cover" />
+
-		<Card.Content>
+		{#if $$slots.default}
-			<slot />
+			<Card.Content>
-		</Card.Content>
+				<div class="flex flex-col items-center justify-center gap-2 sm:flex-row">
-		<Card.Footer class="flex justify-between">
+					<img
+						src={product.getMatchingTags('cover')[0][1]}
+						alt="cover"
+						class="aspect-square w-[200px] object-cover"
+					/>
+					<slot />
+				</div>
+			</Card.Content>
+		{:else}
+			<img
+				src={product.getMatchingTags('cover')[0][1]}
+				alt="cover"
+				class="aspect-square object-cover"
+			/>
+		{/if}
+		<Card.Footer class="flex justify-between pt-2">
 			{#if !includedInRocket()}
 				<AddProductToRocket {product} {rocket} />
 			{:else}

src/components/ProductFomo.svelte

@@ -24,15 +24,19 @@
 <Card.Root class="sm:col-span-3">
 	<Card.Header class="pb-3">
 		<Card.Title>Products and Purchases</Card.Title>
-		<Card.Description class="grid grid-cols-2">
+		<Card.Description></Card.Description>
-			{#each $products as product}
-				<div class="grid-cols-1">
-					<ProductCardFromId {rocket} productID={product.ID}>
-						<ProductPurchases {rocket} {product} />
-					</ProductCardFromId>
-				</div>
-			{/each}
-		</Card.Description>
 	</Card.Header>
+	<Card.Content
+		class="grid gap-2"
+		style="grid-template-columns: repeat(auto-fit, minmax(min(100% - 2rem, 400px), 1fr));"
+	>
+		{#each $products as product}
+			<div>
+				<ProductCardFromId {rocket} productID={product.ID}>
+					<ProductPurchases {rocket} {product} />
+				</ProductCardFromId>
+			</div>
+		{/each}
+	</Card.Content>
 	<Card.Footer></Card.Footer>
 </Card.Root>

src/components/ProductPurchases.svelte

@@ -47,7 +47,6 @@
 </script>
 
 {#if $purchases.size > 0}
-	<div class="pt-2 text-lg font-semibold">Purchases</div>
 	<Table.Root>
 		<Table.Header>
 			<Table.Row>

src/routes/products/+page.svelte

@@ -46,8 +46,10 @@
 {#if productsToRender && $productsToRender}
 	{#each $productsToRender as [r, p]}
 		<Heading title={r.dTag} />
-		{#each p as product}
+		<div class="grid gap-2" style="grid-template-columns: repeat(auto-fit, 350px);">
-			<ProductCard {product} rocket={r} />
+			{#each p as product}
-		{/each}
+				<ProductCard {product} rocket={r} />
+			{/each}
+		</div>
 	{/each}
 {/if}