chore: just add pb to product page instead of layout

Author: pooriaset

src/app/[locale]/(main)/(container)/layout.tsx

@@ -1,7 +1,4 @@
-import {
-  MOBILE_BUY_BOX_HEIGHT,
-  MOBILE_FOOTER_HEIGHT,
-} from '@/config/responsive';
+import { MOBILE_FOOTER_HEIGHT } from '@/config/responsive';
 import { Container } from '@mui/material';
 import { FC, ReactNode } from 'react';
 
@@ -15,7 +12,7 @@ const Layout: FC<Layout> = async ({ children }) => {
       maxWidth="xl"
       sx={{
         mt: 3,
-        pb: { xs: `${MOBILE_FOOTER_HEIGHT + MOBILE_BUY_BOX_HEIGHT}px`, md: 0 },
+        pb: { xs: `${MOBILE_FOOTER_HEIGHT}px`, md: 0 },
         minHeight: '70vh',
       }}
     >

src/app/[locale]/(main)/(container)/products/[...params]/page.tsx

@@ -12,6 +12,7 @@ import ProductGallery from './components/ProductGallery';
 import ProductTabs from './components/ProductTabs';
 import SizeSelector from './components/SizeSelector';
 import ProductProvider from './providers/ProductProvider';
+import { MOBILE_BUY_BOX_HEIGHT } from '@/config/responsive';
 
 type PageProps = {
   params: { params: string[] };
@@ -61,7 +62,13 @@ const Page: FC<PageProps> = async ({ params: { params } }) => {
         selectedVariantId: null,
       }}
     >
-      <Grid container spacing={2}>
+      <Grid
+        container
+        spacing={2}
+        sx={{
+          pb: { xs: `${MOBILE_BUY_BOX_HEIGHT}px` },
+        }}
+      >
         <Grid item md={5} xs={12}>
           <ProductGallery
             thumbnail={product.image}

src/components/Footer/components/MobileFooter.tsx

@@ -68,7 +68,7 @@ const MobileFooter = () => {
         position: 'fixed',
         bottom: 0,
         boxShadow: (theme) => theme.shadows[3],
-        zIndex: 2000,
+        zIndex: 1290,
       }}
     >
       <MuiBottomNavigation