From 2bfe89c472cd79896f7ca0efb6b9475ad07e94a1 Mon Sep 17 00:00:00 2001
From: Greg Richardson <greg.nmr@gmail.com>
Date: Tue, 11 Jun 2024 13:23:45 -0600
Subject: [PATCH] feat(db-playground): improved chart layout & responsiveness

---
 apps/database-playground/app/page.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/database-playground/app/page.tsx b/apps/database-playground/app/page.tsx
index a9622a52c9d..0ac04a89031 100644
--- a/apps/database-playground/app/page.tsx
+++ b/apps/database-playground/app/page.tsx
@@ -301,11 +301,13 @@ export default function Page() {
                                     <ErrorBoundary
                                       key={toolInvocation.toolCallId}
                                       fallbackRender={() => (
-                                        <div className="bg-warning-300">Error loading chart</div>
+                                        <div className="bg-destructive-300 px-6 py-4 rounded-md">
+                                          Error loading chart
+                                        </div>
                                       )}
                                     >
                                       <m.div
-                                        className="relative w-full"
+                                        className="relative w-full max-w-2xl h-[50vw] max-h-96 my-8"
                                         variants={{
                                           hidden: {
                                             opacity: 0,
@@ -317,7 +319,15 @@ export default function Page() {
                                         initial="hidden"
                                         animate="show"
                                       >
-                                        <ChartWrapper type={type} data={data} options={options} />
+                                        <ChartWrapper
+                                          className="max-w-full max-h-full"
+                                          type={type}
+                                          data={data}
+                                          options={{
+                                            ...options,
+                                            maintainAspectRatio: false,
+                                          }}
+                                        />
                                       </m.div>
                                     </ErrorBoundary>
                                   )