From 3854f710df91ddd9a09eccda9ab42b84d7cef605 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Cem=20=C3=9Cnalan?= Date: Fri, 13 Sep 2024 18:55:47 +0300 Subject: [PATCH] In-App: make in-app header sticky (#51187) * In-App: make in-app header sticky z-index: 1 is required to make sure the header appears above product cards. Also had to remove a parent `overflow: hidden` property. Apparently, it's there to remove a second scrollbar. Upon removal, I didn't see any double scrollbars, although it can be platform differences. Will check it out in the PR review. * Add changefile(s) from automation for the following project(s): woocommerce * Update Change Your Store width for Marketplace search listing Setting it 450px hardcoded causes overflows and breaks the layout. See: https://github.com/woocommerce/woocommerce/pull/51187#issuecomment-2344003169 * Move CYS tweak to the component It was placed in the marketplace SCSS code previously. GitHub: https://github.com/woocommerce/woocommerce/pull/51187#discussion_r1758381473 * Remove marketplace-specific styles from customize store banner --------- Co-authored-by: github-actions Co-authored-by: Herman --- .../client/marketplace/components/content/content.scss | 10 ++++++++++ .../client/marketplace/components/header/header.scss | 3 +++ .../client/marketplace/marketplace.scss | 5 ----- ...1187-update-21566-in-app-marketaplace-header-sticky | 4 ++++ 4 files changed, 17 insertions(+), 5 deletions(-) create mode 100644 plugins/woocommerce/changelog/51187-update-21566-in-app-marketaplace-header-sticky diff --git a/plugins/woocommerce-admin/client/marketplace/components/content/content.scss b/plugins/woocommerce-admin/client/marketplace/components/content/content.scss index f6277377eb8..5303f22b12d 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/content/content.scss +++ b/plugins/woocommerce-admin/client/marketplace/components/content/content.scss @@ -8,8 +8,18 @@ min-height: 500px; } +.woocommerce-marketplace__content .woocommerce-customize-store-banner .woocommerce-customize-store-banner-content { + width: 100%; +} + @media screen and (min-width: $breakpoint-medium) { .woocommerce-marketplace__content { padding: $grid-unit-60 $grid-unit-40; } } + +@media screen and (max-width: $breakpoint-medium) { + .woocommerce-marketplace__content .woocommerce-customize-store-banner .woocommerce-customize-store-banner-content { + margin-top: 40px; + } +} diff --git a/plugins/woocommerce-admin/client/marketplace/components/header/header.scss b/plugins/woocommerce-admin/client/marketplace/components/header/header.scss index d26281083a2..11616f62a7f 100644 --- a/plugins/woocommerce-admin/client/marketplace/components/header/header.scss +++ b/plugins/woocommerce-admin/client/marketplace/components/header/header.scss @@ -9,6 +9,9 @@ "mktpl-tabs mktpl-tabs mktpl-tabs" auto / 1fr 320px 36px; padding: 0 $content-spacing-large; width: 100%; + position: sticky; + top: var(--wp-admin--admin-bar--height, 32px); + z-index: 1; /* On narrow screens, "stack" header items and hide the bottom border */ @media (width <= $breakpoint-medium) { diff --git a/plugins/woocommerce-admin/client/marketplace/marketplace.scss b/plugins/woocommerce-admin/client/marketplace/marketplace.scss index 5a0813ae16d..913eb917ed1 100644 --- a/plugins/woocommerce-admin/client/marketplace/marketplace.scss +++ b/plugins/woocommerce-admin/client/marketplace/marketplace.scss @@ -7,11 +7,6 @@ margin: 0; } - #wpbody-content { - /* Prevent double-scrollbar issue on WooCommerce > Extension pages */ - overflow: hidden; - } - .woocommerce-layout__primary { margin: 0; } diff --git a/plugins/woocommerce/changelog/51187-update-21566-in-app-marketaplace-header-sticky b/plugins/woocommerce/changelog/51187-update-21566-in-app-marketaplace-header-sticky new file mode 100644 index 00000000000..844123a8234 --- /dev/null +++ b/plugins/woocommerce/changelog/51187-update-21566-in-app-marketaplace-header-sticky @@ -0,0 +1,4 @@ +Significance: patch +Type: update + +Make In-App Marketplace header sticky to improve discoverability. \ No newline at end of file