fix(web): make agent cards fill responsive grid

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',

src/web-ui/src/app/scenes/agents/AgentsScene.tsx

@@ -656,15 +656,20 @@ 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} />}
               message={t('coreAgentsZone.empty')}
               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>
 

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);

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;
-  }
-}

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);