Collapse table grid items on mobile viewports

benvinegar · Jan 19, 2024 · fd0acec · fd0acec
1 parent 87bac90
commit fd0acec
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx
@@ -194,13 +194,13 @@ export default function Dashboard() {
                 </Card>
             </div>
 
-            <div className="grid grid-cols-2 gap-4 mb-4">
+            <div className="grid md:grid-cols-2 gap-4 mb-4">
                 <TableCard countByProperty={data.countByPath} columnHeaders={["Page", "Visitors"]} />
 
                 <TableCard countByProperty={data.countByReferrer} columnHeaders={["Referrer", "Visitors"]} />
             </div>
 
-            <div className="grid grid-cols-3 gap-4">
+            <div className="grid md:grid-cols-3 gap-4">
                 <TableCard countByProperty={data.countByBrowser} columnHeaders={["Browser", "Visitors"]} />
 
                 <TableCard countByProperty={countByCountryName} columnHeaders={["Country", "Visitors"]} />