💄 Optimize card of product

src/pages/console/index.tsx

@@ -26,7 +26,7 @@ export default function ConsoleLanding() {
           <Typography variant="subtitle1">of the Solar Network</Typography>
         </Box>
 
-        <Grid container columns={{ xs: 2, sm: 2, md: 3, lg: 4 }} spacing={4}>
+        <Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
           <Grid size={1}>
             <NextLink passHref href="/console/matrix">
               <CardActionArea>

src/pages/console/matrix/index.tsx

@@ -1,7 +1,17 @@
 import { ConsoleLayout, getConsoleStaticProps } from '@/components/layouts/ConsoleLayout'
 import { MaProduct } from '@/services/matrix/product'
 import { sni } from '@/services/network'
-import { Typography, Container, Box, Button, Grid2 as Grid, Card, CardActionArea, CardContent } from '@mui/material'
+import {
+  Typography,
+  Container,
+  Box,
+  Button,
+  Grid2 as Grid,
+  Card,
+  CardActionArea,
+  CardContent,
+  CardActions,
+} from '@mui/material'
 import NextLink from 'next/link'
 import { useEffect, useState } from 'react'
 
@@ -36,11 +46,9 @@ export default function MatrixMarketplace() {
           Matrix Marketplace
         </Typography>
 
-        <Grid container columns={{ xs: 2, sm: 2, md: 3, lg: 4 }} spacing={4}>
+        <Grid container columns={{ xs: 1, sm: 2, md: 3 }} spacing={4}>
           {products.map((p) => (
             <Grid size={1} key={p.id}>
-              <NextLink passHref href="/console/matrix">
-                <CardActionArea>
               <Card sx={{ width: '100%' }}>
                 <CardContent>
                   <Typography variant="h5" gutterBottom>
@@ -48,9 +56,11 @@ export default function MatrixMarketplace() {
                   </Typography>
                   <Typography variant="body1">{p.description}</Typography>
                 </CardContent>
+                <CardActions>
+                  <Button size="small">Details</Button>
+                  <Button size="small">Edit</Button>
+                </CardActions>
               </Card>
-                </CardActionArea>
-              </NextLink>
             </Grid>
           ))}
         </Grid>