From 3030ff3e4e88e61a30433b1a8ff01d2c0b230d3b Mon Sep 17 00:00:00 2001 From: CodingOnStar Date: Mon, 31 Aug 2026 17:53:15 +0800 Subject: [PATCH] fix(web): stop stacking mobile search and tab padding Tuck the catalog tabs under the sticky search padding so the banner gap stays, but search and Plugins/Templates tabs no longer add two gaps on top of each other. --- .../home/__tests__/home-catalog-handoff.browser.spec.tsx | 3 +-- .../plugins/marketplace/home/home-sticky.module.css | 8 ++++---- 2 files changed, 5 insertions(+), 6 deletions(-) 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; }