fix marketplace hero shake

This commit is contained in:
crazywoola
2026-05-12 13:03:54 +08:00
parent 6d64b4c43d
commit 7ceffde6b9
2 changed files with 7 additions and 3 deletions

View File

@ -97,5 +97,11 @@ describe('Description', () => {
expect(container.querySelector('.custom-hero-class')).toBeInTheDocument()
})
it('should keep the hero bottom padding fixed during collapse animation', () => {
const { container } = render(<Description />)
expect(container.firstElementChild).toHaveStyle({ paddingBottom: '24px' })
})
})
})

View File

@ -22,7 +22,6 @@ const MAX_SCROLL = 120 // pixels to fully collapse
const EXPANDED_PADDING_TOP = 32 // pt-8
const COLLAPSED_PADDING_TOP = 12 // pt-3
const EXPANDED_PADDING_BOTTOM = 24 // pb-6
const COLLAPSED_PADDING_BOTTOM = 12 // pb-3
export const Description = ({
className,
@ -112,7 +111,6 @@ export const Description = ({
const tabsMarginTop = useTransform(smoothProgress, [0, 1], [48, marketplaceNav ? 16 : 0])
const titleMarginTop = useTransform(smoothProgress, [0, 1], [marketplaceNav ? 80 : 0, 0])
const paddingTop = useTransform(smoothProgress, [0, 1], [marketplaceNav ? COLLAPSED_PADDING_TOP : EXPANDED_PADDING_TOP, COLLAPSED_PADDING_TOP])
const paddingBottom = useTransform(smoothProgress, [0, 1], [EXPANDED_PADDING_BOTTOM, COLLAPSED_PADDING_BOTTOM])
useEffect(() => {
const container = document.getElementById(scrollContainerId)
@ -172,7 +170,7 @@ export const Description = ({
)}
style={{
paddingTop,
paddingBottom,
paddingBottom: EXPANDED_PADDING_BOTTOM,
}}
>
{/* Blue base background */}