From 433a553f88f06c7a9bbc32faeaa0ebbddc26e7d8 Mon Sep 17 00:00:00 2001
From: CodingOnStar <hanxujiang@dify.com>
Date: Fri, 24 Jul 2026 17:34:46 +0800
Subject: [PATCH] fix: align marketplace home filters to left

---
 .../marketplace/__tests__/plugin-type-switch.spec.tsx  |  2 ++
 .../home/__tests__/home-catalog-navigation.spec.tsx    |  5 +++++
 .../marketplace/home/home-catalog-navigation.tsx       | 10 ++--------
 .../plugins/marketplace/plugin-type-switch.tsx         |  2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx b/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx
index 31aaadb531d..8f396cfc3a0 100644
--- a/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx
+++ b/web/app/components/plugins/marketplace/__tests__/plugin-type-switch.spec.tsx
@@ -51,7 +51,9 @@ describe('PluginTypeSwitch', () => {
   it('exposes the selected category and updates the URL in the home variant', async () => {
     const user = userEvent.setup()
     const { onUrlUpdate } = renderSwitch('?category=all', { variant: 'home' })
+    const categoryGroup = screen.getByRole('group', { name: 'marketplace.allPlugins' })
 
+    expect(categoryGroup).toHaveClass('w-full', 'justify-start', 'gap-1')
     expect(screen.getByRole('button', { name: 'category.all' })).toHaveAttribute(
       'aria-pressed',
       'true',
diff --git a/web/app/components/plugins/marketplace/home/__tests__/home-catalog-navigation.spec.tsx b/web/app/components/plugins/marketplace/home/__tests__/home-catalog-navigation.spec.tsx
index 951f6860bf5..dc54407ca59 100644
--- a/web/app/components/plugins/marketplace/home/__tests__/home-catalog-navigation.spec.tsx
+++ b/web/app/components/plugins/marketplace/home/__tests__/home-catalog-navigation.spec.tsx
@@ -27,6 +27,11 @@ describe('HomeCatalogNavigation', () => {
   it('keeps template navigation inside the Marketplace platform', () => {
     render(<HomeCatalogNavigation isMarketplacePlatform />)
 
+    const navigationSection = screen.getByRole('region', { name: 'common.mainNav.marketplace' })
+
+    expect(navigationSection).toHaveClass('px-9')
+    expect(navigationSection.firstElementChild).toHaveClass('w-full')
+    expect(navigationSection.firstElementChild).not.toHaveClass('mx-auto', 'max-w-[1200px]')
     expect(screen.getByText('plugin.marketplace.home.plugins')).toHaveAttribute(
       'aria-current',
       'page',
diff --git a/web/app/components/plugins/marketplace/home/home-catalog-navigation.tsx b/web/app/components/plugins/marketplace/home/home-catalog-navigation.tsx
index 7d1e03872ea..f8883c6f9c4 100644
--- a/web/app/components/plugins/marketplace/home/home-catalog-navigation.tsx
+++ b/web/app/components/plugins/marketplace/home/home-catalog-navigation.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import { cn } from '@langgenius/dify-ui/cn'
 import { useTranslation } from '#i18n'
 import Link from '@/next/link'
 import { getMarketplaceUrl } from '@/utils/var'
@@ -17,14 +16,9 @@ function HomeCatalogNavigation({ isMarketplacePlatform }: HomeCatalogNavigationP
   return (
     <section
       aria-label={t(($) => $['mainNav.marketplace'], { ns: 'common' })}
-      className="w-full shrink-0 bg-background-default px-8 pt-6 pb-4"
+      className="w-full shrink-0 bg-background-default px-9 pt-6 pb-4"
     >
-      <div
-        className={cn(
-          'mx-auto w-full',
-          isMarketplacePlatform ? 'max-w-[1200px]' : 'max-w-[1188px]',
-        )}
-      >
+      <div className="w-full">
         <nav
           aria-label={t(($) => $['mainNav.marketplace'], { ns: 'common' })}
           className="-ml-2 flex h-8 items-center gap-1"
diff --git a/web/app/components/plugins/marketplace/plugin-type-switch.tsx b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
index 434ae500044..a12ca63b51f 100644
--- a/web/app/components/plugins/marketplace/plugin-type-switch.tsx
+++ b/web/app/components/plugins/marketplace/plugin-type-switch.tsx
@@ -78,7 +78,7 @@ function PluginTypeSwitch({ className, variant = 'default' }: PluginTypeSwitchPr
         isHero
           ? 'flex shrink-0 items-center gap-1 overflow-x-auto'
           : isHome
-            ? 'flex shrink-0 items-center gap-1 overflow-x-auto'
+            ? 'flex w-full shrink-0 items-center justify-start gap-1 overflow-x-auto'
             : 'flex shrink-0 items-center justify-center space-x-2 bg-background-body py-3',
         className,
       )}