fix: side on mobile screen;

src/components/Footer.js

@@ -5,15 +5,13 @@ import React from "react";
 export default function Footer() {
   return (
     <Box
+      className="md:flex text-center justify-end items-center"
       sx={{
         p: 3,
-        display: "flex",
-        justifyContent: "end",
-        alignItems: "center",
       }}
     >
       <a
-        className="flex items-center text-slate-800 font-medium no-underline hover:underline md:mx-5"
+        className="flex items-center justify-center my-3 text-slate-800 font-medium no-underline hover:underline md:mx-5"
         href="https://github.com/nawasan111/final-exam"
       >
         <GitHub sx={{ mx: 1 }} /> Source code

src/pages/admin/order/[id].js

@@ -73,7 +73,7 @@ export default function AdminOrderDetail() {
               </Button>
             </Link>
           </Box>
-          <Paper sx={{ p: 1 }}>
+          <Paper sx={{ p: 1, overflowX: "scroll" }}>
             <Table>
               <TableHead>
                 <TableRow>
@@ -100,7 +100,7 @@ export default function AdminOrderDetail() {
                             alt="รูปสินค้า"
                           />
                         </TableCell>
-                        <TableCell>{pdt.name}</TableCell>
+                        <TableCell sx={{ minWidth: 70 }}>{pdt.name}</TableCell>
                         <TableCell>
                           <div className="max-h-10  overflow-scroll">
                             {pdt.detail}

src/pages/order.js

@@ -120,7 +120,7 @@ export default function Order() {
                             </TableCell>
                             <TableCell>{order.product_count}</TableCell>
                             <TableCell>${order.shipping_price}</TableCell>
-                            <TableCell>
+                            <TableCell sx={{minWidth: 70}}>
                               <Box color={order.pay_status ? "green" : "red"}>
                                 {order.pay_status ? (
                                   "ชำระเงินแล้ว"
@@ -139,7 +139,7 @@ export default function Order() {
                                 )}
                               </Box>
                             </TableCell>
-                            <TableCell>
+                            <TableCell sx={{minWidth: 70}}>
                               {order.send_status == 0 ? (
                                 <Box color="gray">
                                   {order.send_status

src/pages/order/[id].js

@@ -31,9 +31,12 @@ export default function OrderDetail() {
   const fetchOrderDetail = async () => {
     if (!user.value?.token) return;
     try {
-      let response = await axios.get("/api/u/order/detail?id=" + router.query.id, {
-        headers: { token: user.value.token },
-      });
+      let response = await axios.get(
+        "/api/u/order/detail?id=" + router.query.id,
+        {
+          headers: { token: user.value.token },
+        }
+      );
       setOrderDetailList(response.data);
     } catch (err) {
       console.log(err);
@@ -69,7 +72,7 @@ export default function OrderDetail() {
               </Button>
             </Link>
           </Box>
-          <Paper sx={{ p: 1 }}>
+          <Paper sx={{ p: 1, overflowX: "scroll" }}>
             <Table>
               <TableHead>
                 <TableRow>
@@ -96,7 +99,7 @@ export default function OrderDetail() {
                             alt="รูปสินค้า"
                           />
                         </TableCell>
-                        <TableCell>{pdt.name}</TableCell>
+                        <TableCell sx={{minWidth: 70}}>{pdt.name}</TableCell>
                         <TableCell>
                           <div className="max-h-10  overflow-scroll">
                             {pdt.detail}