From 66bc0c8810716538806960e9492c8d6969e8e4a5 Mon Sep 17 00:00:00 2001
From: David Linke <davelinke@users.noreply.github.com>
Date: Thu, 12 Sep 2024 11:12:12 -0400
Subject: [PATCH] fix(patterns): fix page width to occupy available space
 (#1532)

---
 .changeset/mighty-brooms-eat.md                             | 5 +++++
 packages/big-design-patterns/src/components/Page/styled.tsx | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/mighty-brooms-eat.md

diff --git a/.changeset/mighty-brooms-eat.md b/.changeset/mighty-brooms-eat.md
new file mode 100644
index 000000000..4a6c4740c
--- /dev/null
+++ b/.changeset/mighty-brooms-eat.md
@@ -0,0 +1,5 @@
+---
+'@bigcommerce/big-design-patterns': patch
+---
+
+Fixed page width definition to expand to the available area
diff --git a/packages/big-design-patterns/src/components/Page/styled.tsx b/packages/big-design-patterns/src/components/Page/styled.tsx
index 19785ec7e..0379989ec 100644
--- a/packages/big-design-patterns/src/components/Page/styled.tsx
+++ b/packages/big-design-patterns/src/components/Page/styled.tsx
@@ -36,6 +36,7 @@ export const StyledPageBackground = styled(Grid).attrs({ theme: defaultTheme })<
 
 export const StyledPage = styled(Flex).attrs({ theme: defaultTheme })`
   margin: 0 auto;
+  width: 100%;
 
   ${({ theme }) => theme.breakpoints.desktop} {
     max-width: ${({ theme }) => theme.helpers.remCalc(1120)};