update chart css

rainlanguage · Feb 21, 2025 · 6995a91 · 6995a91
1 parent 317b75c
commit 6995a91
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/packages/ui-components/src/lib/components/detail/TanstackPageContentDetail.svelte b/packages/ui-components/src/lib/components/detail/TanstackPageContentDetail.svelte
@@ -21,11 +21,11 @@
 	<div class="mb-6 flex items-end justify-between">
 		<slot name="top" {data} />
 	</div>
-	<div class="grid gap-4 lg:grid-cols-3">
+	<div class="tanstack-detail-grid">
 		<div class="flex flex-col gap-y-6 lg:col-span-1">
 			<slot name="card" {data} />
 		</div>
-		<div class="min-h-[500px] lg:col-span-2">
+		<div class="h-[500px] lg:col-span-2">
 			<slot name="chart" {data} />
 		</div>
 	</div>
@@ -41,3 +41,26 @@
 		{emptyMessage}
 	</div>
 {/if}
+
+<style>
+	.tanstack-detail-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		width: 100%;
+	}
+
+	@media (min-width: 1024px) {
+		.tanstack-detail-grid {
+			flex-direction: row;
+		}
+
+		.tanstack-detail-grid > :first-child {
+			flex: 1;
+		}
+
+		.tanstack-detail-grid > :last-child {
+			flex: 2;
+		}
+	}
+</style>