From afbf1de49094d5e94ba0250db455984a7dc98b1f Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Wed, 12 Jul 2023 15:08:20 +0200 Subject: [PATCH 01/13] Add 'safe area' to reduce UI jumpiness --- .../src/components/AppProvider/AppProvider.scss | 1 + polaris-react/src/components/Frame/Frame.scss | 2 +- polaris-react/src/components/TopBar/TopBar.scss | 6 ++++++ polaris-react/src/components/TopBar/TopBar.tsx | 14 ++++++++------ 4 files changed, 16 insertions(+), 7 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss index 6cd8fabc66e..27b0957c71b 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.scss +++ b/polaris-react/src/components/AppProvider/AppProvider.scss @@ -61,6 +61,7 @@ body { // be overridden using !important. // stylelint-disable-next-line declaration-no-important -- generated by polaris-migrator DO NOT COPY background-color: transparent !important; + box-shadow: none !important; } } diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index 89e7fab2829..6b58bb67a19 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/polaris-react/src/components/Frame/Frame.scss @@ -226,7 +226,7 @@ $sidebar-breakpoint: 1200px; align-items: stretch; min-width: 0; - max-width: 100%; + max-width: calc(100vw - 16px); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include safe-area-for(padding-right, 0, right); diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index b57ae87c558..7b639e73586 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -9,6 +9,7 @@ $icon-size: 20px; height: $top-bar-height; box-shadow: var(--p-shadow-sm); background-color: var(--p-color-bg); + width: var(--pc-content-width); #{$se23} & { background-color: var(--p-color-bg-inverse); @@ -24,6 +25,11 @@ $icon-size: 20px; } } +.Container { + display: flex; + width: calc(100vw - 16px); +} + .LogoDisplayControl { display: none; @media #{$p-breakpoints-md-up} { diff --git a/polaris-react/src/components/TopBar/TopBar.tsx b/polaris-react/src/components/TopBar/TopBar.tsx index 3cf1ea28ae9..e38b413f19e 100644 --- a/polaris-react/src/components/TopBar/TopBar.tsx +++ b/polaris-react/src/components/TopBar/TopBar.tsx @@ -142,12 +142,14 @@ export const TopBar: React.FunctionComponent & { return (
- {navigationButtonMarkup} - {contextMarkup} -
-
{searchMarkup}
-
{secondaryMenu}
- {userMenu} +
+ {navigationButtonMarkup} + {contextMarkup} +
+
{searchMarkup}
+
{secondaryMenu}
+ {userMenu} +
); From 97b1727e23d0027b971285b2577afab941a07a1e Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Fri, 14 Jul 2023 16:58:32 +0200 Subject: [PATCH 02/13] Only use safe area when scrollbars are set to always on --- .../components/AppProvider/AppProvider.tsx | 20 +++++++++++++++++++ polaris-react/src/components/Frame/Frame.scss | 2 +- .../src/components/TopBar/TopBar.scss | 2 +- 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index a4b70ca75f7..becae845732 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -70,6 +70,26 @@ export class AppProvider extends Component { this.setBodyStyles(); this.setRootAttributes(); } + + const parent = document.createElement('div'); + parent.setAttribute('style', 'width:30px;height:30px;'); + parent.classList.add('scrollbar-test'); + + const child = document.createElement('div'); + child.setAttribute('style', 'width:100%;height:40px;overflow:scroll'); + parent.appendChild(child); + document.body.appendChild(parent); + + const scrollbarWidth = + 30 - + (parent.firstChild + ? (parent.firstChild as HTMLDivElement).clientWidth + : 0); + document.documentElement.style.setProperty( + '--p-scrollbar-width', + `${scrollbarWidth}px`, + ); + document.body.removeChild(parent); } componentDidUpdate({ diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index 6b58bb67a19..e19f271e325 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/polaris-react/src/components/Frame/Frame.scss @@ -226,7 +226,7 @@ $sidebar-breakpoint: 1200px; align-items: stretch; min-width: 0; - max-width: calc(100vw - 16px); + max-width: calc(100vw - var(--p-scrollbar-width)); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include safe-area-for(padding-right, 0, right); diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index 7b639e73586..752d452ad81 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -27,7 +27,7 @@ $icon-size: 20px; .Container { display: flex; - width: calc(100vw - 16px); + width: calc(100vw - var(--p-scrollbar-width)); } .LogoDisplayControl { From 3d2009eb2cdde1d90bcd1c6d147b4bc9a7c11efc Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Fri, 14 Jul 2023 17:11:25 +0200 Subject: [PATCH 03/13] Skip scrollbar check on smaller screen due to edge-to-edge cards --- polaris-react/src/components/Frame/Frame.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index e19f271e325..977370d163c 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/polaris-react/src/components/Frame/Frame.scss @@ -226,7 +226,9 @@ $sidebar-breakpoint: 1200px; align-items: stretch; min-width: 0; - max-width: calc(100vw - var(--p-scrollbar-width)); + @media #{$p-breakpoints-sm-up} { + max-width: calc(100vw - var(--p-scrollbar-width)); + } // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY @include safe-area-for(padding-right, 0, right); From 923538e29d956c8ae4f6045e3679faf680cf5544 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Fri, 14 Jul 2023 17:12:32 +0200 Subject: [PATCH 04/13] Remove print style --- polaris-react/src/components/AppProvider/AppProvider.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.scss b/polaris-react/src/components/AppProvider/AppProvider.scss index 27b0957c71b..6cd8fabc66e 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.scss +++ b/polaris-react/src/components/AppProvider/AppProvider.scss @@ -61,7 +61,6 @@ body { // be overridden using !important. // stylelint-disable-next-line declaration-no-important -- generated by polaris-migrator DO NOT COPY background-color: transparent !important; - box-shadow: none !important; } } From 365259ff05c47f80f910f968e42d477031860e28 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Thu, 20 Jul 2023 15:20:38 +0200 Subject: [PATCH 05/13] Refactor code --- .../components/AppProvider/AppProvider.tsx | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index becae845732..b655f091cae 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -71,25 +71,30 @@ export class AppProvider extends Component { this.setRootAttributes(); } - const parent = document.createElement('div'); - parent.setAttribute('style', 'width:30px;height:30px;'); - parent.classList.add('scrollbar-test'); + const overflowParentHeight = 30; + const overflowChildHeight = 40; + const parentEl = document.createElement('div'); + parentEl.setAttribute( + 'style', + `width:${overflowParentHeight}px; height:${overflowParentHeight}px;`, + ); const child = document.createElement('div'); - child.setAttribute('style', 'width:100%;height:40px;overflow:scroll'); - parent.appendChild(child); - document.body.appendChild(parent); + child.setAttribute( + 'style', + `width:100%; height: ${overflowChildHeight}; overflow:scroll`, + ); + parentEl.appendChild(child); + document.body.appendChild(parentEl); const scrollbarWidth = - 30 - - (parent.firstChild - ? (parent.firstChild as HTMLDivElement).clientWidth - : 0); + overflowParentHeight - + (parentEl.firstChild as HTMLDivElement).clientWidth; document.documentElement.style.setProperty( '--p-scrollbar-width', `${scrollbarWidth}px`, ); - document.body.removeChild(parent); + document.body.removeChild(parentEl); } componentDidUpdate({ From bb8f9ca214bc9d870d08aa8554ff15883c627540 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Thu, 20 Jul 2023 16:13:23 +0200 Subject: [PATCH 06/13] Clean up code --- .../components/AppProvider/AppProvider.tsx | 59 +++++++++++-------- .../src/components/TopBar/TopBar.scss | 1 - 2 files changed, 34 insertions(+), 26 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index b655f091cae..15b881941e9 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -24,6 +24,39 @@ import type {FeaturesConfig} from '../../utilities/features'; import './AppProvider.scss'; import './global.scss'; +function measureScrollbars() { + const maxScrollbarWidth = 20; + const overflowParentHeight = 30; + const overflowChildHeight = 40; + const parentEl = document.createElement('div'); + parentEl.setAttribute( + 'style', + `position: absolute; opacity: 0; transform: translate3d(-9999px, -9999px, 0); pointer-events: none; width:${overflowParentHeight}px; height:${overflowParentHeight}px;`, + ); + + const child = document.createElement('div'); + child.setAttribute( + 'style', + `width:100%; height: ${overflowChildHeight}; overflow:scroll`, + ); + parentEl.appendChild(child); + document.body.appendChild(parentEl); + + let scrollbarWidth = + overflowParentHeight - (parentEl.firstChild as HTMLDivElement).clientWidth; + + if (scrollbarWidth > maxScrollbarWidth) { + scrollbarWidth = maxScrollbarWidth; + } + + document.documentElement.style.setProperty( + '--p-scrollbar-width', + `${scrollbarWidth}px`, + ); + + document.body.removeChild(parentEl); +} + interface State { intl: I18n; link: LinkLikeComponent | undefined; @@ -70,31 +103,7 @@ export class AppProvider extends Component { this.setBodyStyles(); this.setRootAttributes(); } - - const overflowParentHeight = 30; - const overflowChildHeight = 40; - const parentEl = document.createElement('div'); - parentEl.setAttribute( - 'style', - `width:${overflowParentHeight}px; height:${overflowParentHeight}px;`, - ); - - const child = document.createElement('div'); - child.setAttribute( - 'style', - `width:100%; height: ${overflowChildHeight}; overflow:scroll`, - ); - parentEl.appendChild(child); - document.body.appendChild(parentEl); - - const scrollbarWidth = - overflowParentHeight - - (parentEl.firstChild as HTMLDivElement).clientWidth; - document.documentElement.style.setProperty( - '--p-scrollbar-width', - `${scrollbarWidth}px`, - ); - document.body.removeChild(parentEl); + measureScrollbars(); } componentDidUpdate({ diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index 752d452ad81..cce5ee88a91 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -9,7 +9,6 @@ $icon-size: 20px; height: $top-bar-height; box-shadow: var(--p-shadow-sm); background-color: var(--p-color-bg); - width: var(--pc-content-width); #{$se23} & { background-color: var(--p-color-bg-inverse); From 11d8d6efc03a648945bfbc4c1489f892a77ea4f9 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Thu, 20 Jul 2023 16:58:00 +0200 Subject: [PATCH 07/13] Address nits --- .../components/AppProvider/AppProvider.tsx | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index 15b881941e9..b23429bd3eb 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -24,34 +24,37 @@ import type {FeaturesConfig} from '../../utilities/features'; import './AppProvider.scss'; import './global.scss'; +const MAX_SCROLLBAR_WIDTH = 20; +const SCROLLBAR_TEST_ELEMENT_PARENT_SIZE = 30; +const SCROLLBAR_TEST_ELEMENT_CHILD_SIZE = 40; + function measureScrollbars() { - const maxScrollbarWidth = 20; - const overflowParentHeight = 30; - const overflowChildHeight = 40; const parentEl = document.createElement('div'); parentEl.setAttribute( 'style', - `position: absolute; opacity: 0; transform: translate3d(-9999px, -9999px, 0); pointer-events: none; width:${overflowParentHeight}px; height:${overflowParentHeight}px;`, + `position: absolute; opacity: 0; transform: translate3d(-9999px, -9999px, 0); pointer-events: none; width:${SCROLLBAR_TEST_ELEMENT_PARENT_SIZE}px; height:${SCROLLBAR_TEST_ELEMENT_PARENT_SIZE}px;`, ); const child = document.createElement('div'); child.setAttribute( 'style', - `width:100%; height: ${overflowChildHeight}; overflow:scroll`, + `width:100%; height: ${SCROLLBAR_TEST_ELEMENT_CHILD_SIZE}; overflow:scroll`, ); parentEl.appendChild(child); document.body.appendChild(parentEl); - let scrollbarWidth = - overflowParentHeight - (parentEl.firstChild as HTMLDivElement).clientWidth; + const scrollbarWidth = + SCROLLBAR_TEST_ELEMENT_PARENT_SIZE - + (parentEl.firstElementChild?.clientWidth ?? 0); - if (scrollbarWidth > maxScrollbarWidth) { - scrollbarWidth = maxScrollbarWidth; - } + const scrollbarWidthWithSafetyHatch = Math.min( + scrollbarWidth, + MAX_SCROLLBAR_WIDTH, + ); document.documentElement.style.setProperty( '--p-scrollbar-width', - `${scrollbarWidth}px`, + `${scrollbarWidthWithSafetyHatch}px`, ); document.body.removeChild(parentEl); From b487d43edd2181e1bc3cb81e7db386a72b69f4b9 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Thu, 20 Jul 2023 16:59:27 +0200 Subject: [PATCH 08/13] Address another nit --- polaris-react/src/components/AppProvider/AppProvider.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index b23429bd3eb..8c06410c609 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -26,7 +26,8 @@ import './global.scss'; const MAX_SCROLLBAR_WIDTH = 20; const SCROLLBAR_TEST_ELEMENT_PARENT_SIZE = 30; -const SCROLLBAR_TEST_ELEMENT_CHILD_SIZE = 40; +const SCROLLBAR_TEST_ELEMENT_CHILD_SIZE = + SCROLLBAR_TEST_ELEMENT_PARENT_SIZE + 10; function measureScrollbars() { const parentEl = document.createElement('div'); From 60dd950b1a74fc30cfb0e472f0c55b418a3f4391 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Thu, 20 Jul 2023 17:03:21 +0200 Subject: [PATCH 09/13] Add changeset --- .changeset/red-doors-retire.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/red-doors-retire.md diff --git a/.changeset/red-doors-retire.md b/.changeset/red-doors-retire.md new file mode 100644 index 00000000000..05fe017f4a8 --- /dev/null +++ b/.changeset/red-doors-retire.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Updated the Frame and Topbar components to stay clear of a scrollbar. This reduces the overall jumpiness in the UI when scrollbars appear and disappear when using a Polaris app. From 99fc3854cd348e51192929262f8fc382bcc5d635 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Fri, 21 Jul 2023 13:49:09 +0200 Subject: [PATCH 10/13] Rename CSS variable --- polaris-react/src/components/AppProvider/AppProvider.tsx | 2 +- polaris-react/src/components/Frame/Frame.scss | 2 +- polaris-react/src/components/TopBar/TopBar.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx index 8c06410c609..0ccab9f01d0 100644 --- a/polaris-react/src/components/AppProvider/AppProvider.tsx +++ b/polaris-react/src/components/AppProvider/AppProvider.tsx @@ -54,7 +54,7 @@ function measureScrollbars() { ); document.documentElement.style.setProperty( - '--p-scrollbar-width', + '--pc-app-provider-scrollbar-width', `${scrollbarWidthWithSafetyHatch}px`, ); diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index 977370d163c..e768b390bd2 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/polaris-react/src/components/Frame/Frame.scss @@ -227,7 +227,7 @@ $sidebar-breakpoint: 1200px; min-width: 0; @media #{$p-breakpoints-sm-up} { - max-width: calc(100vw - var(--p-scrollbar-width)); + max-width: calc(100vw - var(--pc-app-provider-scrollbar-width)); } // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index cce5ee88a91..0c8ae099cf1 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -26,7 +26,7 @@ $icon-size: 20px; .Container { display: flex; - width: calc(100vw - var(--p-scrollbar-width)); + width: calc(100vw - var(--pc-app-provider-scrollbar-width)); } .LogoDisplayControl { From 064f67233d4a32a926322ee432945feb7922a5a0 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Fri, 21 Jul 2023 14:11:14 +0200 Subject: [PATCH 11/13] Disable linting message --- polaris-react/src/components/Frame/Frame.scss | 1 + polaris-react/src/components/TopBar/TopBar.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index e768b390bd2..d46ae0e56b1 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/polaris-react/src/components/Frame/Frame.scss @@ -227,6 +227,7 @@ $sidebar-breakpoint: 1200px; min-width: 0; @media #{$p-breakpoints-sm-up} { + // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties max-width: calc(100vw - var(--pc-app-provider-scrollbar-width)); } diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index 0c8ae099cf1..876b11c90f4 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -26,6 +26,7 @@ $icon-size: 20px; .Container { display: flex; + // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties width: calc(100vw - var(--pc-app-provider-scrollbar-width)); } From bb25a069790fd413ae1403585e90fc4442f1a689 Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Fri, 21 Jul 2023 15:01:45 +0200 Subject: [PATCH 12/13] Reenable rule after CSS property --- polaris-react/src/components/Frame/Frame.scss | 1 + polaris-react/src/components/TopBar/TopBar.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/polaris-react/src/components/Frame/Frame.scss b/polaris-react/src/components/Frame/Frame.scss index d46ae0e56b1..6359de3b450 100644 --- a/polaris-react/src/components/Frame/Frame.scss +++ b/polaris-react/src/components/Frame/Frame.scss @@ -229,6 +229,7 @@ $sidebar-breakpoint: 1200px; @media #{$p-breakpoints-sm-up} { // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties max-width: calc(100vw - var(--pc-app-provider-scrollbar-width)); + // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list } // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index 876b11c90f4..eed6a1ee785 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -28,6 +28,7 @@ $icon-size: 20px; display: flex; // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties width: calc(100vw - var(--pc-app-provider-scrollbar-width)); + // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list } .LogoDisplayControl { From 218bd3e27583806aab6b90ced5c9e23af0bfd5ae Mon Sep 17 00:00:00 2001 From: Marten Bjork Date: Mon, 24 Jul 2023 17:29:37 +0200 Subject: [PATCH 13/13] Move grid logic into container --- polaris-react/src/components/TopBar/TopBar.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/polaris-react/src/components/TopBar/TopBar.scss b/polaris-react/src/components/TopBar/TopBar.scss index 2e965f1bd8b..da8fe99acc3 100644 --- a/polaris-react/src/components/TopBar/TopBar.scss +++ b/polaris-react/src/components/TopBar/TopBar.scss @@ -13,9 +13,6 @@ $right-column: 1fr; .TopBar { position: relative; - display: grid; - grid-template-columns: $left-column $search-column $right-column; - align-items: center; height: $top-bar-height; box-shadow: var(--p-shadow-sm); background-color: var(--p-color-bg); @@ -46,7 +43,9 @@ $right-column: 1fr; } .Container { - display: flex; + display: grid; + grid-template-columns: $left-column $search-column $right-column; + align-items: center; // stylelint-disable -- polaris/conventions/polaris/custom-property-allowed-list -- Polaris component custom properties width: calc(100vw - var(--pc-app-provider-scrollbar-width)); // stylelint-enable -- polaris/conventions/polaris/custom-property-allowed-list