diff --git a/web/app/components/plugins/marketplace/home/__tests__/home-catalog-handoff.browser.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/home-catalog-handoff.browser.spec.tsx index c96a98cd8db..25b68060190 100644 --- a/web/app/components/plugins/marketplace/home/__tests__/home-catalog-handoff.browser.spec.tsx +++ b/web/app/components/plugins/marketplace/home/__tests__/home-catalog-handoff.browser.spec.tsx @@ -216,8 +216,7 @@ describe('Marketplace catalog tab handoff', () => { ).toBeCloseTo( HOME_HEADER_HEIGHT_PX + HOME_SEARCH_HEIGHT_PX + - HOME_SEARCH_MOBILE_PADDING_BOTTOM_PX + - 24 /* .catalogTabsRegion padding-top */, + HOME_SEARCH_MOBILE_PADDING_BOTTOM_PX /* .catalogTabsRegion padding-top, tucked under search padding */, ) await page.viewport(880, 800) diff --git a/web/app/components/plugins/marketplace/home/home-sticky.module.css b/web/app/components/plugins/marketplace/home/home-sticky.module.css index dc01a36914f..e2f99827b1f 100644 --- a/web/app/components/plugins/marketplace/home/home-sticky.module.css +++ b/web/app/components/plugins/marketplace/home/home-sticky.module.css @@ -124,18 +124,18 @@ display: none; } + /* Sit under the search row's padding-bottom so that gap is not stacked + on top of the tabs' own padding when this group pins. */ :global([data-marketplace-standalone]) .catalogNavigationGroup { position: sticky; z-index: 40; display: block; - top: calc( - var(--home-header-height, 48px) + var(--home-search-height, 36px) + - var(--home-search-mobile-padding-bottom, 16px) - ); + top: calc(var(--home-header-height, 48px) + var(--home-search-height, 36px)); background-color: var(--color-background-default); } :global([data-marketplace-standalone]) .catalogTabsRegion { + padding-top: var(--home-search-mobile-padding-bottom, 16px); padding-right: 20px; padding-left: 20px; }