chore: better responsive for charts

duyet · Nov 27, 2023 · 43dc5bc · 43dc5bc
1 parent e4f5562
commit 43dc5bc
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/app/overview/page.tsx b/app/overview/page.tsx
@@ -31,7 +31,7 @@ export default async function Overview() {
         </div>
       </div>
       <TabsContent value="overview" className="space-y-4">
-        <div className="grid grid-cols-2 items-stretch gap-5">
+        <div className="grid grid-cols-1 items-stretch gap-5 md:grid-cols-2">
           <ChartAvgMemory
             title="Memory Usage last 24h (avg / 10 minutes)"
             className="w-full"

diff --git a/components/related-charts.tsx b/components/related-charts.tsx
@@ -33,10 +33,11 @@ export async function RelatedCharts({
     charts.push([chartsModule.default, props])
   }
 
-  const chartWidth = charts.length > 1 ? `w-1/${charts.length}` : 'w-full'
+  const chartWidth =
+    charts.length > 1 ? `w-full md:w-1/${charts.length}` : 'w-full'
 
   return (
-    <div className={cn('mb-5 flex flex-row gap-5', className)}>
+    <div className={cn('mb-5 flex flex-col gap-5 md:flex-row', className)}>
       {charts.map(([Chart, props], i) => (
         <Chart
           key={i}