Fix spacing between cards for single company

ddxv · Dec 23, 2024 · 48463c3 · 48463c3
1 parent 186b3fd
commit 48463c3
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 15 deletions.
diff --git a/frontend/src/lib/CompaniesLayout.svelte b/frontend/src/lib/CompaniesLayout.svelte
@@ -8,17 +8,15 @@
 	}: { card1?: Snippet; card2?: Snippet; card3?: Snippet; card4?: Snippet } = $props();
 </script>
 
-<div class="flex flex-col gap-4 md:gap-6">
-	<div class="md:grid md:grid-cols-1 md:grid-cols-3 gap-4 md:gap-6">
-		{@render card1?.()}
-		{@render card2?.()}
-		{#if card3}
-			{@render card3?.()}
-			<div class="col-span-3 flex gap-4">
-				{@render card4?.()}
-			</div>
-		{:else}
+<div class="flex flex-col md:grid md:grid-cols-3 gap-4 md:gap-6">
+	{@render card1?.()}
+	{@render card2?.()}
+	{#if card3}
+		{@render card3?.()}
+		<div class="col-span-3 flex gap-4">
 			{@render card4?.()}
-		{/if}
-	</div>
+		</div>
+	{:else}
+		{@render card4?.()}
+	{/if}
 </div>
diff --git a/frontend/src/routes/(categorical)/companies/[domain]/+page.svelte b/frontend/src/routes/(categorical)/companies/[domain]/+page.svelte
@@ -27,14 +27,17 @@
 				{#if typeof myData == 'string'}
 					<p class="text-red-500 text-center">Failed to load company details.</p>
 				{:else if myData && myData.length > 0}
-					<div class=" p-2 rounded-lg shadow-md">
-						<h2 class="text-xl font-bold text-primary-900-100 mb-4">Total Apps</h2>
+					<WhiteCard>
+						{#snippet title()}
+							<span>Company's Total Apps</span>
+						{/snippet}
+
 						<p class="text-lg">
 							<span class="font-semibold text-primary-900-100"
 								>{formatNumber(myData.map((d) => d.value).reduce((a, b) => a + b, 0))}</span
 							>
 						</p>
-					</div>
+					</WhiteCard>
 				{/if}
 			{:catch error}
 				<p class="text-red-500 text-center">{error.message}</p>