Add missing gutter to /checkout/item page

graphcommerce-org · Aug 19, 2024 · 4103e09 · 4103e09
1 parent 08f0b1a
commit 4103e09
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 28 deletions.
diff --git a/.changeset/sour-falcons-yawn.md b/.changeset/sour-falcons-yawn.md
@@ -0,0 +1,5 @@
+---
+'@graphcommerce/magento-graphcms': patch
+---
+
+Add missing gutter to /checkout/item page
diff --git a/examples/magento-graphcms/pages/checkout/item/[url].tsx b/examples/magento-graphcms/pages/checkout/item/[url].tsx
@@ -18,7 +18,7 @@ import {
 } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { Trans } from '@lingui/react'
-import { CircularProgress, Typography } from '@mui/material'
+import { CircularProgress, Container, Typography } from '@mui/material'
 import { useRouter } from 'next/router'
 import { LayoutNavigationProps, AddProductsToCartView } from '../../../components'
 import { Props, getStaticProps } from '../../p/[url]'
@@ -65,35 +65,37 @@ function CartItemEdit(props: Props) {
           </EmptyCart>
         )}
         {cartItem && (
-          <EditCartItemForm
-            key={cartItemId}
-            href='/cart'
-            product={product}
-            cartItem={cartItem}
-            defaultValues={defaultValues}
-            redirect={false}
-            disableSuccessSnackbar
-          >
-            <ProductPageGallery
+          <Container>
+            <EditCartItemForm
+              key={cartItemId}
+              href='/cart'
               product={product}
-              disableZoom
-              disableSticky
-              variantMd='oneColumn'
-              sx={(theme) => ({
-                maxWidth: '500px',
-                mb: 0,
-                '& .SidebarGallery-sidebar': { display: 'grid', rowGap: theme.spacings.sm },
-              })}
+              cartItem={cartItem}
+              defaultValues={defaultValues}
+              redirect={false}
+              disableSuccessSnackbar
             >
-              <Typography variant='h3' component='div' gutterBottom>
-                <ProductPageName product={product} />
-              </Typography>
-              <AddProductsToCartView product={product} />
-            </ProductPageGallery>
-            <OverlayStickyBottom sx={{ display: 'flex', justifyContent: 'center' }}>
-              <EditCartItemButton product={product} sx={(theme) => ({ my: theme.spacings.sm })} />
-            </OverlayStickyBottom>
-          </EditCartItemForm>
+              <ProductPageGallery
+                product={product}
+                disableZoom
+                disableSticky
+                variantMd='oneColumn'
+                sx={(theme) => ({
+                  maxWidth: '500px',
+                  mb: 0,
+                  '& .SidebarGallery-sidebar': { display: 'grid', rowGap: theme.spacings.sm },
+                })}
+              >
+                <Typography variant='h3' component='div' gutterBottom>
+                  <ProductPageName product={product} />
+                </Typography>
+                <AddProductsToCartView product={product} />
+              </ProductPageGallery>
+              <OverlayStickyBottom sx={{ display: 'flex', justifyContent: 'center' }}>
+                <EditCartItemButton product={product} sx={(theme) => ({ my: theme.spacings.sm })} />
+              </OverlayStickyBottom>
+            </EditCartItemForm>
+          </Container>
         )}
       </WaitForQueries>
     </>