[Frame] Add scrollbar width buffer onto Content (#11891)

### WHY are these changes introduced?

Part of Shopify/polaris-internal#1379
Follow up to #11826, this change
is still behind a feature flag.

* Moving scrollbar buffer from main to content in `Frame` since we moved
the scrollbar to just the content
* updating `scroll` -> `auto` ensures the scrollbar doesn't show up when
there isn't any scroll.

## Tophat


[Spin](https://admin.web.web-npdr.sophie-schneider.us.spin.dev/store/shop1/products?selectedView=all)

* turn on scrollbars always show in settings, shorten the window so the
scrollbar hides and shows and make sure there isn't a layout shift

![Screen Recording 2024-04-17 at 9 56
36 AM](https://github.com/Shopify/polaris/assets/20652326/9933ab0c-af83-46a4-b60b-d5626f785680)

- [x] Chrome, Firefox, Safari
- [x] Mobile

Author: sophschneider

.changeset/unlucky-coats-add.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Moved `Frame` scrollbar from main to content and set overflow-y from scroll to auto behind a feature flag

polaris-react/src/components/Frame/Frame.module.css

@@ -279,7 +279,7 @@
 }
 
 .Content-TopBarAndReframe {
-  overflow-y: scroll;
+  overflow-y: auto;
   /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- top bar global space */
   margin-bottom: var(--pg-top-bar-height);
   margin-right: var(--p-space-050);
@@ -293,6 +293,17 @@
   }
 }
 
+.ScrollbarSafeArea-TopBarAndReframe {
+  @media (--p-breakpoints-md-up) {
+    /* 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 */
+  }
+}
+
 .GlobalRibbonContainer {
   position: fixed;
   z-index: var(--p-z-index-3);

polaris-react/src/components/Frame/Frame.tsx

@@ -327,7 +327,17 @@ class FrameInner extends PureComponent<CombinedProps, State> {
                           styles['Content-TopBarAndReframe'],
                       )}
                     >
-                      {children}
+                      {features?.dynamicTopBarAndReframe ? (
+                        <div
+                          className={
+                            styles['ScrollbarSafeArea-TopBarAndReframe']
+                          }
+                        >
+                          {children}
+                        </div>
+                      ) : (
+                        children
+                      )}
                     </div>
                   </main>
                 </div>