From 5702feea7af70320d882402f6d9dbdd3822a6d4e Mon Sep 17 00:00:00 2001
From: Sophie Schneider <sophie.schneider@shopify.com>
Date: Wed, 17 Apr 2024 15:16:18 -0400
Subject: [PATCH] [Frame] Accommodate sidebar in scrollbar safe container
 (#11900)

Patching https://github.com/Shopify/polaris/pull/11891 to accommodate
the sidebar width shift
---
 .changeset/pink-keys-act.md                      |  5 +++++
 .../src/components/Frame/Frame.module.css        | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)
 create mode 100644 .changeset/pink-keys-act.md

diff --git a/.changeset/pink-keys-act.md b/.changeset/pink-keys-act.md
new file mode 100644
index 00000000000..84d7cdd46b7
--- /dev/null
+++ 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
index f80320a4307..8e174230001 100644
--- a/polaris-react/src/components/Frame/Frame.module.css
+++ b/polaris-react/src/components/Frame/Frame.module.css
@@ -295,6 +295,7 @@
 
 .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) -
@@ -302,6 +303,21 @@
     );
     /* 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 {