Subtract frame offset from width

Shopify · May 1, 2024 · 0ef181c · 0ef181c
1 parent 2866177
commit 0ef181c
Showing 1 changed file with 5 additions and 3 deletions.
diff --git a/polaris-react/src/components/Frame/Frame.module.css b/polaris-react/src/components/Frame/Frame.module.css
@@ -28,7 +28,7 @@
   /* 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(100% - var(--pc-frame-offset));
+    width: calc(100% - var(--pc-frame-offset, 0px));
   }
 
   @media (prefers-reduced-motion) {
@@ -307,7 +307,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(--pc-app-provider-scrollbar-width) - var(--pc-frame-offset, 0px)
     );
     /* stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list */
 
@@ -325,7 +325,8 @@
       /* 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(--pc-sidebar-width)
+          var(--pc-app-provider-scrollbar-width) - var(--pc-sidebar-width) -
+          var(--pc-frame-offset, 0px)
       );
       margin-right: unset;
     }
@@ -439,6 +440,7 @@
   }
 
   @media (--p-breakpoints-md-up) {
+    /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- private token from component */
     width: calc(100% - var(--pc-frame-offset, 0px));
   }