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,6 +87,7 @@ export default function Member() {
           {message.message}
         </Alert>
       </Snackbar>
+      <Box sx={{ maxWidth: 1520, mx: "auto" }}>
         <Box sx={{ m: 1, textAlign: "right" }}>
           <FormControl>
             <Select
@@ -147,7 +146,9 @@ export default function Member() {
                   </TableCell>
                   <TableCell sx={{ textAlign: "center" }}>
                     <Button
-                    onClick={() => setDeleteState({ open: true, id: user.id })}
+                      onClick={() =>
+                        setDeleteState({ open: true, id: user.id })
+                      }
                       color="error"
                     >
                       ลบ
@@ -158,6 +159,7 @@ export default function Member() {
             </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>
         )}