[Frame] Fixed main override class (Shopify#11881)

### WHY are these changes introduced? |Before|After| |-|-| |<img width="367" alt="Screenshot 2024-04-10 at 10 39 29 PM" src="https://github.com/Shopify/polaris/assets/20652326/98aa1299-7c24-4fe9-9b6b-693c8339bf03">|<img width="352" alt="Screenshot 2024-04-10 at 10 39 59 PM" src="https://github.com/Shopify/polaris/assets/20652326/be7a6289-ae69-4c81-bc93-9af5d9f75fcd">| ### WHAT is this pull request doing? When merging the classes in [this PR](Shopify#11846) and [this commit](Shopify@587d890) I missed the removal of the `max-width` class in the overrides. This was causing a space between the scrollbar and the frame container.
AnnaCheba · Apr 11, 2024 · fc5feb7 · fc5feb7
1 parent 74ebd15
commit fc5feb7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/.changeset/nice-ants-visit.md b/.changeset/nice-ants-visit.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed Frame feature override class to get proper max-width for main content.
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -246,6 +246,10 @@
   height: 100vh;
   overflow: hidden;
 
+  @media (--p-breakpoints-sm-up) {
+    max-width: unset;
+  }
+
   .hasTopBar & {
     /* stylelint-disable-next-line -- polaris custom global property */
     margin-top: var(--pg-top-bar-height);