Clean up grid layout for cars page

sgcarstrends · Nov 10, 2024 · 8505931 · 8505931
1 parent 2f2b5b6
commit 8505931
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 15 deletions.
diff --git a/app/cars/page.tsx b/app/cars/page.tsx
@@ -5,13 +5,7 @@ import { MonthSelector } from "@/components/MonthSelector";
 import { StatisticsCard } from "@/components/StatisticsCard";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { API_URL, HYBRID_REGEX, SITE_TITLE, SITE_URL } from "@/config";
 import {
   type Car,
@@ -246,8 +240,8 @@ const CarsPage = async (props: { searchParams: SearchParams }) => {
                 {/*  </Card>*/}
                 {/*</UnreleasedFeature>*/}
               </div>
-              <div className="grid gap-4 lg:grid-cols-12">
-                <div className="grid grid-cols-1 gap-4 lg:col-span-8">
+              <div className="grid gap-4 xl:grid-cols-12">
+                <div className="grid grid-cols-1 gap-4 xl:col-span-6">
                   <StatisticsCard
                     title="By Fuel Type"
                     description="Distribution of vehicles based on fuel type"
@@ -263,7 +257,7 @@ const CarsPage = async (props: { searchParams: SearchParams }) => {
                     linkPrefix="vehicle-types"
                   />
                 </div>
-                <div className="grid gap-4 lg:col-span-4">
+                <div className="grid grid-cols-1 gap-4 xl:col-span-6">
                   <Leaderboard cars={cars} />
                 </div>
               </div>

diff --git a/components/StatisticsCard.tsx b/components/StatisticsCard.tsx
@@ -62,11 +62,9 @@ export const StatisticsCard = ({
         <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardContent>
-        <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
-          <div className="xl:col-span-6">
-            <DistributionPieChart data={data} type={title} />
-          </div>
-          <div className="xl:col-span-6">
+        <div className="grid grid-cols-1 gap-4">
+          <DistributionPieChart data={data} type={title} />
+          <div>
             <Table>
               <TableCaption>Click on the rows for more details</TableCaption>
               <TableHeader>