Fix PopoverOverlay reframe scroll

Shopify · Apr 29, 2024 · 2cdb657 · 2cdb657
1 parent 1501689
commit 2cdb657
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 6 deletions.
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -50,7 +50,10 @@ function measureScrollbars() {
     `width:100%; height: ${SCROLLBAR_TEST_ELEMENT_CHILD_SIZE}; overflow:scroll; scrollbar-width: thin;`,
   );
   parentEl.appendChild(child);
-  document.body.appendChild(parentEl);
+  // document.body.appendChild(parentEl);
+  const frameScroll = document.getElementById(APP_FRAME_CONTENT);
+  const scrollContainer = frameScroll ?? document.body;
+  scrollContainer.appendChild(parentEl);
 
   const scrollbarWidth =
     SCROLLBAR_TEST_ELEMENT_PARENT_SIZE -
@@ -66,7 +69,7 @@ function measureScrollbars() {
     `${scrollbarWidthWithSafetyHatch}px`,
   );
 
-  document.body.removeChild(parentEl);
+  scrollContainer.removeChild(parentEl);
 }
 
 interface State {

diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -310,8 +310,7 @@
     /* 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) -
-        var(--pc-frame-offset)
+        var(--pc-app-provider-scrollbar-width) - var(--pc-frame-offset)
     );
     /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */
 
@@ -329,8 +328,7 @@
       /* 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)
+          var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width)
       );
     }
 

diff --git a/polaris-react/src/components/Navigation/Navigation.module.css b/polaris-react/src/components/Navigation/Navigation.module.css
@@ -115,6 +115,7 @@
 
   @media (--p-breakpoints-md-up) {
     border-top-right-radius: 0;
+    padding-top: var(--p-space-400);
   }
 }
 

diff --git a/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx b/polaris-react/src/components/PositionedOverlay/PositionedOverlay.tsx
@@ -214,6 +214,11 @@ export class PositionedOverlay extends PureComponent<
       }
     }
 
+    const frameScroll = document.getElementById('AppFrameContent');
+    if (frameScroll?.contains(this.props.activator)) {
+      containers.push(frameScroll);
+    }
+
     this.scrollableContainers = containers;
   };
 
@@ -265,6 +270,7 @@ export class PositionedOverlay extends PureComponent<
         const activatorRect = getRectForNode(preferredActivator);
 
         const currentOverlayRect = getRectForNode(this.overlay);
+
         const scrollableElement = isDocument(this.firstScrollableContainer)
           ? document.body
           : this.firstScrollableContainer;