{header}
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 77b36600614..8a8687bb7cc 100644
--- a/web/app/components/plugins/marketplace/home/home-sticky.module.css
+++ b/web/app/components/plugins/marketplace/home/home-sticky.module.css
@@ -1,6 +1,6 @@
-/* The header height and the sticky top offset of the catalog navigation are
- inline styles driven by HOME_HEADER_HEIGHT_PX in home-constants.ts, so the
- two values cannot drift apart. */
+/* Sticky offsets read --home-header-height and --home-search-height from
+ HomeShell (HOME_HEADER_HEIGHT_PX / HOME_SEARCH_HEIGHT_PX). Desktop catalog
+ navigation still pins with an inline top of HOME_HEADER_HEIGHT_PX. */
.headerCatalogTabs {
display: flex;
@@ -45,9 +45,12 @@
}
.search {
+ position: sticky;
+ z-index: 60;
top: 6px;
padding-right: 356px;
padding-left: 356px;
+ overflow-anchor: none;
}
.searchContent {
@@ -98,8 +101,12 @@
}
:global([data-marketplace-standalone]) .search {
+ position: sticky;
+ z-index: 45;
+ top: var(--home-header-height, 48px);
padding-right: 20px;
padding-left: 20px;
+ background-color: var(--color-background-default);
}
:global([data-marketplace-standalone]) .searchContent {
@@ -118,6 +125,7 @@
position: sticky;
z-index: 40;
display: block;
+ top: calc(var(--home-header-height, 48px) + var(--home-search-height, 36px));
background-color: var(--color-background-default);
}
diff --git a/web/app/components/plugins/marketplace/home/preserve-sticky-search-scroll.ts b/web/app/components/plugins/marketplace/home/preserve-sticky-search-scroll.ts
new file mode 100644
index 00000000000..cd4e3167833
--- /dev/null
+++ b/web/app/components/plugins/marketplace/home/preserve-sticky-search-scroll.ts
@@ -0,0 +1,99 @@
+const LARGE_SCROLL_JUMP_PX = 16
+
+/**
+ * Sticky search sits in document flow below the hero, then visually pins in the
+ * header. Focusing or typing in that input makes Chromium scroll the layout box
+ * into view, which unpins the search and looks like the page rolling down.
+ * Remember the scroll position and snap back when a focused search input causes
+ * a large jump.
+ */
+export function preserveStickySearchScroll(searchRoot: HTMLElement, container: HTMLElement) {
+ let stableScrollTop = container.scrollTop
+ let suppressing = false
+
+ const remember = () => {
+ if (!suppressing) stableScrollTop = container.scrollTop
+ }
+
+ const restore = () => {
+ if (container.scrollTop === stableScrollTop) return
+ suppressing = true
+ container.scrollTop = stableScrollTop
+ requestAnimationFrame(() => {
+ suppressing = false
+ })
+ }
+
+ const onScroll = () => {
+ if (suppressing) return
+ if (searchRoot.contains(document.activeElement)) {
+ if (Math.abs(container.scrollTop - stableScrollTop) > LARGE_SCROLL_JUMP_PX) {
+ restore()
+ return
+ }
+ }
+ remember()
+ }
+
+ const onPointerDown = (event: PointerEvent) => {
+ if (!(event.target instanceof Node) || !searchRoot.contains(event.target)) return
+ remember()
+ suppressing = true
+ requestAnimationFrame(() => {
+ restore()
+ suppressing = false
+ })
+ }
+
+ const onFocusIn = (event: FocusEvent) => {
+ if (!(event.target instanceof Node) || !searchRoot.contains(event.target)) return
+ restore()
+ requestAnimationFrame(restore)
+ }
+
+ const onInput = (event: Event) => {
+ if (!(event.target instanceof Node) || !searchRoot.contains(event.target)) return
+ restore()
+ }
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ if (event.key !== 'Tab') return
+ remember()
+ suppressing = true
+ requestAnimationFrame(() => {
+ suppressing = false
+ })
+ }
+
+ const patchInputFocus = (input: HTMLInputElement) => {
+ if (input.dataset.marketplaceSearchFocus === 'patched') return
+ input.dataset.marketplaceSearchFocus = 'patched'
+ const nativeFocus = input.focus.bind(input)
+ input.focus = (options) => nativeFocus({ ...options, preventScroll: true })
+ }
+
+ searchRoot.querySelectorAll('input').forEach((input) => {
+ patchInputFocus(input)
+ })
+ const observer = new MutationObserver(() => {
+ searchRoot.querySelectorAll('input').forEach((input) => {
+ patchInputFocus(input)
+ })
+ })
+ observer.observe(searchRoot, { childList: true, subtree: true })
+
+ container.addEventListener('scroll', onScroll, { passive: true })
+ searchRoot.addEventListener('pointerdown', onPointerDown, true)
+ searchRoot.addEventListener('focusin', onFocusIn)
+ searchRoot.addEventListener('input', onInput, true)
+ window.addEventListener('keydown', onKeyDown, true)
+
+ return () => {
+ observer.disconnect()
+ container.removeEventListener('scroll', onScroll)
+ searchRoot.removeEventListener('pointerdown', onPointerDown, true)
+ searchRoot.removeEventListener('focusin', onFocusIn)
+ searchRoot.removeEventListener('input', onInput, true)
+ window.removeEventListener('keydown', onKeyDown, true)
+ }
+}
diff --git a/web/app/components/plugins/marketplace/search-params.ts b/web/app/components/plugins/marketplace/search-params.ts
index d4506367ff7..1c22597c69f 100644
--- a/web/app/components/plugins/marketplace/search-params.ts
+++ b/web/app/components/plugins/marketplace/search-params.ts
@@ -11,7 +11,7 @@ export const marketplaceSearchParamsParsers = {
)
.withDefault('all')
.withOptions({ history: 'replace', clearOnDefault: false, scroll: false }),
- q: parseAsString.withDefault('').withOptions({ history: 'replace' }),
+ q: parseAsString.withDefault('').withOptions({ history: 'replace', scroll: false }),
tags: parseAsArrayOf(parseAsString).withDefault([]).withOptions({ history: 'replace' }),
languages: parseAsArrayOf(parseAsString).withDefault([]).withOptions({ history: 'replace' }),
}