diff --git a/UNRELEASED.md b/UNRELEASED.md index 88b17528317..2326de79661 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,6 +12,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Bug fixes +- Centered full width `Popover` on small viewports ([#4114](https://github.com/Shopify/polaris-react/pull/4114)) + ### Documentation ### Development workflow diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index 36472fbf789..b139d143f0c 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -42,8 +42,7 @@ $vertical-motion-offset: rem(-5px); } .fullWidth { - margin: 0; - margin-top: $visible-portion-of-arrow; + margin: $visible-portion-of-arrow auto 0 auto; .Content { max-width: none; @@ -54,7 +53,7 @@ $vertical-motion-offset: rem(-5px); margin: spacing() spacing(tight) $visible-portion-of-arrow; &.fullWidth { - margin: 0 0 $visible-portion-of-arrow; + margin: 0 auto $visible-portion-of-arrow auto; } }