Add back in scrollbar safe area

Shopify · Apr 30, 2024 · eaf3cd1 · eaf3cd1
1 parent 5e64873
commit eaf3cd1
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -290,6 +290,18 @@
 }
 
 .Content-TopBarAndReframe {
+  height: 100%;
+
+  .hasSidebar & {
+    /* Sidebar breakpoint is 1200px */
+    /* stylelint-disable-next-line polaris/media-queries/polaris/media-query-allowed-list -- custom breakpoint */
+    @media screen and (min-width: 1200px) {
+      margin-right: unset;
+    }
+  }
+}
+
+.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 */

diff --git a/polaris-react/src/components/Frame/Frame.tsx b/polaris-react/src/components/Frame/Frame.tsx
@@ -322,6 +322,7 @@ class FrameInner extends PureComponent<CombinedProps, State> {
                 {hasDynamicTopBar ? (
                   <Scrollable
                     scrollbarWidth="thin"
+                    horizontal={false}
                     className={styles.Scrollable}
                     id={APP_FRAME_SCROLLABLE}
                   >
@@ -332,7 +333,11 @@ class FrameInner extends PureComponent<CombinedProps, State> {
                       )}
                       id={APP_FRAME_CONTENT}
                     >
-                      {children}
+                      <div
+                        className={styles['ScrollbarSafeArea-TopBarAndReframe']}
+                      >
+                        {children}
+                      </div>
                     </div>
                   </Scrollable>
                 ) : (