diff --git a/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx index 7abd529b4c6..80b1155be2a 100644 --- a/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx +++ b/web/app/components/plugins/marketplace/home/__tests__/home-trending-layout.browser.spec.tsx @@ -61,6 +61,23 @@ describe('Marketplace home trending layout', () => { expect(adSlide.getBoundingClientRect().height).toBe(blogSlide.getBoundingClientRect().height) }) + it('keeps the ad artwork left-aligned so responsive cropping stays on the right', async () => { + await page.viewport(600, 900) + const screen = await render( +
+ +
, + ) + + const artwork = screen + .getByRole('link', { name: 'Partner campaign' }) + .element() + .querySelector('img') + + expect(artwork).not.toBeNull() + expect(getComputedStyle(artwork!).objectPosition).toBe('0% 50%') + }) + it('keeps the blog artwork left corners rounded when its image is cropped', async () => { const screen = await render(
diff --git a/web/app/components/plugins/marketplace/home/home-trending-slides.tsx b/web/app/components/plugins/marketplace/home/home-trending-slides.tsx index f205cfd59d2..3eb13335aaa 100644 --- a/web/app/components/plugins/marketplace/home/home-trending-slides.tsx +++ b/web/app/components/plugins/marketplace/home/home-trending-slides.tsx @@ -453,6 +453,7 @@ function ImageBannerSlide({ alt="" aria-hidden className="size-full object-cover" + style={{ objectPosition: banner.style_type === 'ad' ? 'left center' : undefined }} />