From a194038846d74818528bb8078690e88d19f09c62 Mon Sep 17 00:00:00 2001
From: Frank Harland <frank@h-o.nl>
Date: Fri, 20 Dec 2024 16:48:54 +0100
Subject: [PATCH 1/2] fix issue where layout title would be left aligned

---
 .../ProductListLayout/ProductListLayoutClassic.tsx         | 6 +++---
 .../ProductListLayout/ProductListLayoutDefault.tsx         | 7 +------
 packages/next-ui/Layout/components/LayoutTitle.tsx         | 1 +
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx
index 30eca5d01c..9b39a0562b 100644
--- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx
+++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutClassic.tsx
@@ -14,6 +14,7 @@ import {
 import { LayoutTitle, memoDeep, StickyBelowHeader, Container } from '@graphcommerce/next-ui'
 import { ProductListItems } from '../ProductListItems'
 import { ProductListLayoutProps } from './types'
+import { Trans } from '@lingui/macro'
 
 export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps) => {
   const { filters, filterTypes, params, products, title, category } = props
@@ -39,7 +40,6 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps)
             variant='h1'
             sx={(theme) => ({
               mb: (category?.description || category?.children) && theme.spacings.md,
-              alignItems: { xs: 'center', md: 'center' },
             })}
             gutterBottom={!category?.description && category?.children?.length === 0}
           >
@@ -57,8 +57,8 @@ export const ProductListLayoutClassic = memoDeep((props: ProductListLayoutProps)
           </CategoryChildren>
         </>
       ) : (
-        <LayoutTitle gutterTop variant='h1' sx={{ alignItems: { xs: 'center', md: 'center' } }}>
-          Search {params.search}
+        <LayoutTitle gutterTop variant='h1'>
+          <Trans>Search</Trans> {params.search}
         </LayoutTitle>
       )}
 
diff --git a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
index 76d5996ead..790e5e3cb9 100644
--- a/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
+++ b/examples/magento-graphcms/components/ProductListLayout/ProductListLayoutDefault.tsx
@@ -64,12 +64,7 @@ export const ProductListLayoutDefault = memoDeep((props: ProductListLayoutProps)
 
         {category ? (
           <>
-            <LayoutTitle
-              gutterTop
-              variant='h1'
-              sx={{ alignItems: { xs: 'left', md: 'center' } }}
-              gutterBottom={false}
-            >
+            <LayoutTitle gutterTop variant='h1' gutterBottom={false}>
               {title}
             </LayoutTitle>
             <CategoryDescription
diff --git a/packages/next-ui/Layout/components/LayoutTitle.tsx b/packages/next-ui/Layout/components/LayoutTitle.tsx
index 64c98b13c8..f578099396 100644
--- a/packages/next-ui/Layout/components/LayoutTitle.tsx
+++ b/packages/next-ui/Layout/components/LayoutTitle.tsx
@@ -41,6 +41,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
+          width: '100%',
           gap: '6px',
           '&.sizeSmall': {
             overflow: 'hidden',

From db3e142d6f8b09a0f6b67a06e664b23946a71173 Mon Sep 17 00:00:00 2001
From: Paul Hachmang <paul@reachdigital.nl>
Date: Fri, 20 Dec 2024 16:51:23 +0100
Subject: [PATCH 2/2] Create orange-olives-smile.md

---
 .changeset/orange-olives-smile.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/orange-olives-smile.md

diff --git a/.changeset/orange-olives-smile.md b/.changeset/orange-olives-smile.md
new file mode 100644
index 0000000000..40f4e4fa8d
--- /dev/null
+++ b/.changeset/orange-olives-smile.md
@@ -0,0 +1,6 @@
+---
+"@graphcommerce/next-ui": patch
+"@graphcommerce/magento-graphcms": patch
+---
+
+Fix issue where layout title would be left aligned