[Frame] Accommodate sidebar in scrollbar safe container (#11900)

Patching #11891 to accommodate the sidebar width shift
Shopify · Apr 17, 2024 · 5702fee · 5702fee
1 parent e981267
commit 5702fee
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 0 deletions.
diff --git a/.changeset/pink-keys-act.md b/.changeset/pink-keys-act.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `Frame` scrollbar safe area to accommodate sidebar
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -295,13 +295,29 @@
 
 .ScrollbarSafeArea-TopBarAndReframe {
   @media (--p-breakpoints-md-up) {
+    transition: width var(--p-motion-duration-250) var(--p-motion-ease);
     /* stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties */
     width: calc(
       100vw - var(--pg-navigation-width) -
         var(--pc-app-provider-scrollbar-width) - var(--p-space-150)
     );
     /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */
   }
+
+  .hasSidebar & {
+    transition: width var(--p-motion-duration-250) var(--p-motion-ease);
+
+    /* Sidebar breakpoint is 1200px */
+    /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
+    @media screen and (min-width: 1200px) {
+      /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
+      width: calc(
+        100vw - var(--pg-navigation-width) -
+          var(--pc-app-provider-scrollbar-width) - var(--p-space-150) -
+          var(--pc-sidebar-width)
+      );
+    }
+  }
 }
 
 .GlobalRibbonContainer {