fix & updates: responsive for large screen;

src/components/AdminNavbar.js

@@ -246,7 +246,7 @@ function AdminNavbar(props) {
   return (
     <>
       <AppBar position="fixed" style={{ backgroundColor: "black" }}>
-        <Toolbar>
+        <Toolbar className="max-w-[1520px] 2xl:mx-auto 2xl:w-full box-border">
           <Typography
             variant="h6"
             noWrap

src/components/Footer.js

@@ -5,7 +5,7 @@ import React from "react";
 export default function Footer() {
   return (
     <Box
-      className="md:flex text-center justify-end items-center"
+      className="md:flex text-center justify-end items-center max-w-[1520px] mx-auto"
       sx={{
         p: 3,
       }}

src/components/Navbar.js

@@ -307,11 +307,11 @@ function Navbar(props) {
   return (
     <>
       <AppBar
-        className="shadow-sm bg-white/90"
+        className="shadow-sm bg-white/90  px-0"
         color="inherit"
         position="fixed"
       >
-        <Toolbar>
+        <Toolbar className="max-w-[1520px] 2xl:mx-auto 2xl:w-full box-border">
           <Typography
             variant="h6"
             noWrap

src/components/ProductCard.js

@@ -29,11 +29,10 @@ export default function ProductCard({
    */
   return (
     <div
-      className="p-1 my-3 w-[300px] mx-auto inline-block bg-white rounded hover:shadow duration-300"
+      className="p-1 my-3 w-[300px] sm:w-[270px] xl:w-[320px] mx-auto inline-block bg-white rounded hover:shadow duration-300"
       sx={{
         m: 1,
         px: 1,
-        width: 300,
         // height: 500,
         display: "inline-block",
       }}

src/pages/admin/member.js

@@ -7,8 +7,6 @@ import {
   Box,
   Button,
   FormControl,
-  FormLabel,
-  InputLabel,
   MenuItem,
   Paper,
   Select,
@@ -89,75 +87,79 @@ export default function Member() {
           {message.message}
         </Alert>
       </Snackbar>
-      <Box sx={{ m: 1, textAlign: "right" }}>
-        <FormControl>
-          <Select
-            variant="standard"
-            value={filterAdmin}
-            onChange={(e) => setFilterAdmin(Number(e.target.value))}
-          >
-            <MenuItem value={-1}>ทั้งหมด</MenuItem>
-            <MenuItem value={0}>admin</MenuItem>
-            <MenuItem value={1}>ผู้ใช้</MenuItem>
-          </Select>
-        </FormControl>
-      </Box>
-      <Paper sx={{ p: 2, overflowX: "scroll" }}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              {[
-                "id",
-                "รูป",
-                "ชื่อ",
-                "username",
-                "เบอร์โทร",
-                "อีเมล",
-                "rank",
-                "ลบ",
-              ].map((label, idx) => (
-                <TableCell sx={{ textAlign: "center" }} key={idx}>
-                  {label}
-                </TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {userAllFilter.map((user, idx) => (
-              <TableRow key={idx}>
-                <TableCell>{user.id}</TableCell>
-                <TableCell>
-                  <img
-                  className="rounded-lg object-cover"
-                    width={70}
-                    height={70}
-                    src={user?.photo?.length ? user.photo : "/empty.jpg"}
-                    alt="profile"
-                  />
-                </TableCell>
-                <TableCell>{user.name}</TableCell>
-                <TableCell>@{user.username}</TableCell>
-                <TableCell>{user.phone}</TableCell>
-                <TableCell>{user.email}</TableCell>
-                <TableCell sx={{ textAlign: "center" }}>
-                  <Switch
-                    checked={!!user.rank}
-                    onChange={() => changeRank(user.id, !user.rank)}
-                  />
-                </TableCell>
-                <TableCell sx={{ textAlign: "center" }}>
-                  <Button
-                    onClick={() => setDeleteState({ open: true, id: user.id })}
-                    color="error"
-                  >
-                    ลบ
-                  </Button>
-                </TableCell>
+      <Box sx={{ maxWidth: 1520, mx: "auto" }}>
+        <Box sx={{ m: 1, textAlign: "right" }}>
+          <FormControl>
+            <Select
+              variant="standard"
+              value={filterAdmin}
+              onChange={(e) => setFilterAdmin(Number(e.target.value))}
+            >
+              <MenuItem value={-1}>ทั้งหมด</MenuItem>
+              <MenuItem value={0}>admin</MenuItem>
+              <MenuItem value={1}>ผู้ใช้</MenuItem>
+            </Select>
+          </FormControl>
+        </Box>
+        <Paper sx={{ p: 2, overflowX: "scroll" }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                {[
+                  "id",
+                  "รูป",
+                  "ชื่อ",
+                  "username",
+                  "เบอร์โทร",
+                  "อีเมล",
+                  "rank",
+                  "ลบ",
+                ].map((label, idx) => (
+                  <TableCell sx={{ textAlign: "center" }} key={idx}>
+                    {label}
+                  </TableCell>
+                ))}
               </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Paper>
+            </TableHead>
+            <TableBody>
+              {userAllFilter.map((user, idx) => (
+                <TableRow key={idx}>
+                  <TableCell>{user.id}</TableCell>
+                  <TableCell>
+                    <img
+                      className="rounded-lg object-cover"
+                      width={70}
+                      height={70}
+                      src={user?.photo?.length ? user.photo : "/empty.jpg"}
+                      alt="profile"
+                    />
+                  </TableCell>
+                  <TableCell>{user.name}</TableCell>
+                  <TableCell>@{user.username}</TableCell>
+                  <TableCell>{user.phone}</TableCell>
+                  <TableCell>{user.email}</TableCell>
+                  <TableCell sx={{ textAlign: "center" }}>
+                    <Switch
+                      checked={!!user.rank}
+                      onChange={() => changeRank(user.id, !user.rank)}
+                    />
+                  </TableCell>
+                  <TableCell sx={{ textAlign: "center" }}>
+                    <Button
+                      onClick={() =>
+                        setDeleteState({ open: true, id: user.id })
+                      }
+                      color="error"
+                    >
+                      ลบ
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </Paper>
+      </Box>
       {deleteState.open && (
         <DeleteMember
           open={deleteState.open}

src/pages/admin/stock.js

@@ -54,7 +54,7 @@ export default function Stock() {
     if (router.query?.cat) {
       setCategory(router.query.cat);
     } else {
-      setCategory('');
+      setCategory("");
     }
   }, [router]);
 
@@ -64,7 +64,7 @@ export default function Stock() {
         <title>รายการสินค้า | admin</title>
       </Head>
       <Box>
-        <Box sx={{ mb: 2, textAlign: "right" }}>
+        <Box sx={{ maxWidth: 1520, mx: "auto", mb: 2, textAlign: "right" }}>
           <Button onClick={() => setModal(!modal)}>
             <AddShoppingCart />
             เพิ่มสินค้า

src/pages/index.js

@@ -242,7 +242,7 @@ export default function Home() {
             ))}
           </div>
         ) : (
-          <Paper className="shadow-none" sx={{ p: 2, textAlign: "center" }}>
+          <Paper className="max-w-[1520px] mx-auto shadow-none" sx={{ p: 2, textAlign: "center" }}>
             {algorithm.length ? "ไม่พบรายการ" : <CircularProgress />}
           </Paper>
         )}