From 0a81df1f2fe6b4aab51cd375da970df3d730a624 Mon Sep 17 00:00:00 2001
From: Bob Lee <liwenbo628@gmail.com>
Date: Sat, 1 Aug 2026 18:54:48 -0700
Subject: [PATCH] fix(web): make agent cards fill responsive grid

---
 .../app/scenes/agents/AgentsScene.test.tsx    | 21 +++++++++++++++++
 .../src/app/scenes/agents/AgentsScene.tsx     | 11 ++++++---
 .../scenes/agents/components/AgentCard.scss   |  3 ++-
 .../agents/components/CoreAgentCard.scss      | 23 -------------------
 .../agents/components/_AgentSurfaceCard.scss  |  3 ++-
 5 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx
index bd56a0423b..425d6198df 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.test.tsx
@@ -232,6 +232,27 @@ describeWithJsdom('AgentsScene', () => {
     expect(stylesheet).toContain('min-width: 0;');
   });
 
+  it('uses the shared responsive gallery grid and lets agent cards fill each track', () => {
+    const sceneSource = readFileSync(
+      fileURLToPath(new URL('./AgentsScene.tsx', import.meta.url)),
+      'utf8',
+    );
+    const agentCardStyles = readFileSync(
+      fileURLToPath(new URL('./components/AgentCard.scss', import.meta.url)),
+      'utf8',
+    );
+    const coreCardSurfaceStyles = readFileSync(
+      fileURLToPath(new URL('./components/_AgentSurfaceCard.scss', import.meta.url)),
+      'utf8',
+    );
+
+    expect(sceneSource.match(/<GalleryGrid minCardWidth=\{360\}>/g)).toHaveLength(2);
+    expect(agentCardStyles).toMatch(/\.agent-card \{\s+width: 100%;\s+min-width: 0;/);
+    expect(coreCardSurfaceStyles).toMatch(/width: 100%;\s+min-width: 0;/);
+    expect(agentCardStyles).not.toContain('width: 360px;');
+    expect(coreCardSurfaceStyles).not.toContain('width: 360px;');
+  });
+
   it('shows skill grouping and editing for a custom subagent with the Skill tool', async () => {
     const subagent = {
       key: 'user::skill-worker',
diff --git a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
index 1d9c1df7be..ee43499154 100644
--- a/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
+++ b/src/web-ui/src/app/scenes/agents/AgentsScene.tsx
@@ -656,7 +656,12 @@ const AgentsHomeView: React.FC = () => {
           )}
         >
           {loading ? (
-            <GallerySkeleton count={3} cardHeight={160} className="core-agent-skeleton" />
+            <GallerySkeleton
+              count={3}
+              cardHeight={160}
+              minCardWidth={360}
+              className="core-agent-skeleton"
+            />
           ) : coreAgents.length === 0 ? (
             <GalleryEmpty
               icon={<Cpu size={32} strokeWidth={1.5} />}
@@ -664,7 +669,7 @@ const AgentsHomeView: React.FC = () => {
               testId="agent-list-empty"
             />
           ) : (
-            <div className="core-agents-grid">
+            <GalleryGrid minCardWidth={360}>
               {coreAgents.map((agent, index) => (
                 <CoreAgentCard
                   key={agent.id}
@@ -690,7 +695,7 @@ const AgentsHomeView: React.FC = () => {
                   }
                 />
               ))}
-            </div>
+            </GalleryGrid>
           )}
         </GalleryZone>
 
diff --git a/src/web-ui/src/app/scenes/agents/components/AgentCard.scss b/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
index d2d482edb3..dc95067ab8 100644
--- a/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/AgentCard.scss
@@ -2,7 +2,8 @@
 @use '../../../styles/surface-stagger';
 
 .agent-card {
-  width: 360px;
+  width: 100%;
+  min-width: 0;
   height: 200px;
   border-radius: 15px;
   background: var(--element-bg-soft);
diff --git a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
index f5db494061..1d452e81ab 100644
--- a/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/CoreAgentCard.scss
@@ -152,15 +152,6 @@
   }
 }
 
-// ── Grid wrapper (3-col max for core section) ─────────────────────
-
-.core-agents-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  gap: $size-gap-2;
-  width: 100%;
-}
-
 // ── Animation ─────────────────────────────────────────────────────
 
 @media (prefers-reduced-motion: reduce) {
@@ -169,17 +160,3 @@
     transition: none;
   }
 }
-
-// ── Responsive ────────────────────────────────────────────────────
-
-@media (max-width: 1080px) {
-  .core-agents-grid {
-    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
-  }
-}
-
-@media (max-width: 640px) {
-  .core-agents-grid {
-    grid-template-columns: 1fr;
-  }
-}
diff --git a/src/web-ui/src/app/scenes/agents/components/_AgentSurfaceCard.scss b/src/web-ui/src/app/scenes/agents/components/_AgentSurfaceCard.scss
index 151bcd69be..be48397c78 100644
--- a/src/web-ui/src/app/scenes/agents/components/_AgentSurfaceCard.scss
+++ b/src/web-ui/src/app/scenes/agents/components/_AgentSurfaceCard.scss
@@ -4,7 +4,8 @@
 @mixin agent-surface-card($gradient, $accent) {
   --agent-surface-shadow-color: rgb(var(--color-overlay-slate-rgb));
 
-  width: 360px;
+  width: 100%;
+  min-width: 0;
   height: 200px;
   border-radius: 15px;
   background: var(--element-bg-soft);