From 42a2c70b145bae82355d174df9a832c734361b4a Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Sun, 21 Jun 2026 11:21:52 -0400
Subject: [PATCH] style(plugin-market): widen marketplace cards via auto-fill
 min width

Replace fixed grid-cols breakpoints (which forced up to 4 narrow cards on
wide screens) with auto-fill columns and a 24rem minimum card width on
both the main market grid and the featured recommendation rows. The
featured rows already measure real column count via ResizeObserver, so
pagination adapts automatically.
---
 .../components/plugin-market/PluginMarketComponent.tsx        | 2 +-
 .../plugins/components/plugin-market/RecommendationLists.tsx  | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
index 928d13884..1687f3c47 100644
--- a/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/PluginMarketComponent.tsx
@@ -862,7 +862,7 @@ function MarketPageContent({
           </div>
         ) : (
           <>
-            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6 mt-6">
+            <div className="grid gap-6 mt-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr))]">
               {visiblePlugins.map((plugin) => (
                 <PluginMarketCardComponent
                   key={plugin.pluginId}
diff --git a/web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx b/web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx
index 65aa78074..ffb5b339b 100644
--- a/web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx
+++ b/web/src/app/home/plugins/components/plugin-market/RecommendationLists.tsx
@@ -16,7 +16,7 @@ export interface RecommendationList {
   plugins: PluginV4[];
 }
 
-// Match the main plugin grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4
+// Match the main plugin grid: auto-fill columns with a 24rem minimum width
 
 function pluginToVO(
   plugin: PluginV4,
@@ -144,7 +144,7 @@ function RecommendationListRow({
       </div>
       <div
         ref={gridRef}
-        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-6"
+        className="grid gap-6 [grid-template-columns:repeat(auto-fill,minmax(min(100%,24rem),1fr))]"
       >
         {visiblePlugins.map((plugin) => (
           <PluginMarketCardComponent