From 2607a015821d322f331ed0a464ecb6e8cfe39f65 Mon Sep 17 00:00:00 2001
From: Alex Page <alex@alexpage.com.au>
Date: Mon, 9 Nov 2020 09:25:09 -0500
Subject: [PATCH 1/4] Remove 10px padding on details page

---
 .storybook/polaris-readme-loader.js | 1 +
 .storybook/preview.js               | 1 +
 2 files changed, 2 insertions(+)

diff --git a/.storybook/polaris-readme-loader.js b/.storybook/polaris-readme-loader.js
index 2f3f066ebeb..24fcebadbb4 100644
--- a/.storybook/polaris-readme-loader.js
+++ b/.storybook/polaris-readme-loader.js
@@ -71,6 +71,7 @@ ${example.storyName}.parameters = {
     minHeight: '720px',
     borderBottom: '1px solid #000',
     marginBottom: '8px',
+    padding: '10px',
   }}>
   <Heading>${example.name}</Heading>
   <${example.storyName}Component />
diff --git a/.storybook/preview.js b/.storybook/preview.js
index bc71e045941..c82e38d39dd 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -12,6 +12,7 @@ export const parameters = {
     skip: true,
     widths: [375, 1280],
   },
+  layout: 'fullscreen'
 };
 
 function StrictModeToggle({isStrict = false, children}) {

From 785d0b3074b75ad583441d7b78fab9ceb5eb48a0 Mon Sep 17 00:00:00 2001
From: Alex Page <alex@alexpage.com.au>
Date: Mon, 9 Nov 2020 10:44:42 -0500
Subject: [PATCH 2/4] Fix search alignment with page

---
 src/components/TopBar/TopBar.scss | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/TopBar/TopBar.scss b/src/components/TopBar/TopBar.scss
index 0ecdca67c1d..1c3afbce3a0 100644
--- a/src/components/TopBar/TopBar.scss
+++ b/src/components/TopBar/TopBar.scss
@@ -2,8 +2,7 @@
 @import './variables';
 
 $icon-size: rem(20px);
-$page-left-alignment-breakpoint-max: 1268px;
-$context-control-extra-spacing: rem(40px);
+$page-left-alignment-breakpoint-max: 1238px;
 $context-control-expand-after: 1400px;
 
 .TopBar {
@@ -118,12 +117,6 @@ $context-control-expand-after: 1400px;
   max-width: none;
   margin-left: calc((100% - #{$page-max-width}) / 2);
 
-  @include breakpoint-after($context-control-expand-after) {
-    margin-left: calc(
-      (100% - #{$page-max-width + $context-control-extra-spacing}) / 2
-    );
-  }
-
   @media (max-width: $page-left-alignment-breakpoint-max) {
     margin-left: 0;
     margin-right: spacing(extra-tight);

From f6d1b35190ebcfaee4385e8ae7b498a7026389b3 Mon Sep 17 00:00:00 2001
From: Alex Page <alex@alexpage.com.au>
Date: Mon, 9 Nov 2020 10:58:49 -0500
Subject: [PATCH 3/4] Update UNRELEASED.md

---
 UNRELEASED.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 77b0d6ca064..8e19121f721 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -14,6 +14,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Fixed alignment of `Page` and `TopBar` so the search aligns to the page. ([#3610](https://github.com/Shopify/polaris-react/pull/3610))
 - Removed extra bottom border on the `DataTable` and added curved edges to footers ([#3571](https://github.com/Shopify/polaris-react/pull/3571))
 - **`Button`:** `loading` no longer sets the invalid `role="alert"` ([#3590](https://github.com/Shopify/polaris-react/pull/3590))
 - Removed `tabIndex=-1` from `Popover` when `preventAutoFocus` is true ([#3595](https://github.com/Shopify/polaris-react/pull/3595))

From c37a86fa4eaffe61a8c659168248509c701013d1 Mon Sep 17 00:00:00 2001
From: Alex Page <alex@alexpage.com.au>
Date: Mon, 9 Nov 2020 19:44:51 -0500
Subject: [PATCH 4/4] Apply fullwidth layout to Playground pages

---
 .storybook/polaris-readme-loader.js | 1 -
 .storybook/preview.js               | 1 -
 playground/stories.tsx              | 1 +
 3 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/.storybook/polaris-readme-loader.js b/.storybook/polaris-readme-loader.js
index 24fcebadbb4..2f3f066ebeb 100644
--- a/.storybook/polaris-readme-loader.js
+++ b/.storybook/polaris-readme-loader.js
@@ -71,7 +71,6 @@ ${example.storyName}.parameters = {
     minHeight: '720px',
     borderBottom: '1px solid #000',
     marginBottom: '8px',
-    padding: '10px',
   }}>
   <Heading>${example.name}</Heading>
   <${example.storyName}Component />
diff --git a/.storybook/preview.js b/.storybook/preview.js
index c82e38d39dd..bc71e045941 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -12,7 +12,6 @@ export const parameters = {
     skip: true,
     widths: [375, 1280],
   },
-  layout: 'fullscreen'
 };
 
 function StrictModeToggle({isStrict = false, children}) {
diff --git a/playground/stories.tsx b/playground/stories.tsx
index ae20bcf8514..3f838143d05 100644
--- a/playground/stories.tsx
+++ b/playground/stories.tsx
@@ -7,6 +7,7 @@ export default {
   title: 'Playground/Playground',
   parameters: {
     chromatic: {disable: true},
+    layout: 'fullscreen',
   },
 };