From 7c571f7faba6e1b029012ab61c0276323d331d2a Mon Sep 17 00:00:00 2001 From: Spencer Canner Date: Fri, 9 Apr 2021 16:27:53 -0400 Subject: [PATCH 1/3] center full width popovers on small viewports --- UNRELEASED.md | 2 ++ src/components/Popover/Popover.scss | 5 ++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 88b17528317..06c5094c058 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,6 +12,8 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Bug fixes +- Center 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..c6c46ec29b0 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; .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; } } From 8fda4ffd92b7f42f2e726b7278dc1d771bc20239 Mon Sep 17 00:00:00 2001 From: Spencer Canner Date: Fri, 3 Dec 2021 10:33:05 -0500 Subject: [PATCH 2/3] use four values for margin shorthand --- src/components/Popover/Popover.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Popover/Popover.scss b/src/components/Popover/Popover.scss index c6c46ec29b0..b139d143f0c 100644 --- a/src/components/Popover/Popover.scss +++ b/src/components/Popover/Popover.scss @@ -42,7 +42,7 @@ $vertical-motion-offset: rem(-5px); } .fullWidth { - margin: $visible-portion-of-arrow auto 0; + margin: $visible-portion-of-arrow auto 0 auto; .Content { max-width: none; @@ -53,7 +53,7 @@ $vertical-motion-offset: rem(-5px); margin: spacing() spacing(tight) $visible-portion-of-arrow; &.fullWidth { - margin: 0 auto $visible-portion-of-arrow; + margin: 0 auto $visible-portion-of-arrow auto; } } From 8bb6f26a8063bd153422a3a7bdb40f3613a539d1 Mon Sep 17 00:00:00 2001 From: Spencer Canner Date: Fri, 3 Dec 2021 10:33:22 -0500 Subject: [PATCH 3/3] update UNRELEASED.md --- UNRELEASED.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index 06c5094c058..2326de79661 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,7 +12,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Bug fixes -- Center full width `Popover` on small viewports ([#4114](https://github.com/Shopify/polaris-react/pull/4114)) +- Centered full width `Popover` on small viewports ([#4114](https://github.com/Shopify/polaris-react/pull/4114)) ### Documentation