From 74bfab20a66beec172ac2c358fc73d15ff205ba8 Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Thu, 27 Aug 2026 16:02:15 +0800
Subject: [PATCH] fix(web): crop ad banners from the right (ECO-467)

---
 .../home-trending-layout.browser.spec.tsx       | 17 +++++++++++++++++
 .../marketplace/home/home-trending-slides.tsx   |  1 +
 2 files changed, 18 insertions(+)

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(
+      <div data-marketplace-standalone className="w-[560px]">
+        <HomeBannerSlide banner={adBanner} isMarketplacePlatform page="plugins" />
+      </div>,
+    )
+
+    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(
       <div className="w-[600px]">
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 }}
         />
       </picture>
     </Link>