From 77229b10b19589821d7da04865e917522dc1d16d Mon Sep 17 00:00:00 2001
From: Renn F <rennf93@users.noreply.github.com>
Date: Wed, 15 Jul 2026 17:17:19 +0200
Subject: [PATCH] =?UTF-8?q?fix(panel):=20agent=20cards=20=E2=80=94=20intri?=
 =?UTF-8?q?nsic=20auto-fill=20grid,=20roomier=20cards?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

repeat(auto-fill, minmax(17rem, 1fr)) replaces the breakpoint ladder:
one column on a phone through eight on a 27", consistent card width
across every team section at any viewport. Cards gain padding and a
base-size title.
---
 panel/src/components/agents/agent-card.tsx |  8 ++++----
 panel/src/components/agents/agent-grid.tsx | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/panel/src/components/agents/agent-card.tsx b/panel/src/components/agents/agent-card.tsx
index d09927a4..948e8b05 100644
--- a/panel/src/components/agents/agent-card.tsx
+++ b/panel/src/components/agents/agent-card.tsx
@@ -72,10 +72,10 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
         : null;
 
   return (
-    <Card className={cn("gap-2 py-3", isActive && "border-green-500/50")}>
-      <CardHeader className="gap-0.5 px-3">
+    <Card className={cn("gap-2.5 py-4", isActive && "border-green-500/50")}>
+      <CardHeader className="gap-1 px-4">
         <div className="flex items-center justify-between gap-1">
-          <CardTitle className="truncate text-sm">
+          <CardTitle className="truncate text-base">
             {agent.name || "Unknown Agent"}
           </CardTitle>
           <DropdownMenu>
@@ -126,7 +126,7 @@ export function AgentCard({ agent, agentStatus, usageRow }: AgentCardProps) {
           {agent.team && " • " + agent.team.replace(/_/g, " ")}
         </CardDescription>
       </CardHeader>
-      <CardContent className="px-3">
+      <CardContent className="px-4">
         <HelpTip label={agentStateDescription(state)}>
           <span className="inline-flex items-center gap-1.5 text-xs font-medium">
             <span
diff --git a/panel/src/components/agents/agent-grid.tsx b/panel/src/components/agents/agent-grid.tsx
index ffdb65fe..5cc71b19 100644
--- a/panel/src/components/agents/agent-grid.tsx
+++ b/panel/src/components/agents/agent-grid.tsx
@@ -13,10 +13,10 @@ interface AgentGridProps {
   isLoading: boolean;
 }
 
-// Compact cards need far less width per card than the old large ones, so
-// wide screens fit up to 8 across instead of wrapping a tall, ragged grid.
-const GRID_COLS =
-  "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8";
+// Intrinsic sizing: every card gets at least 17rem and rows fill whatever
+// the viewport offers — one column on a phone, eight on a 27" — with a
+// consistent card width across all team sections at any width.
+const GRID_COLS = "grid-cols-[repeat(auto-fill,minmax(17rem,1fr))]";
 
 export function AgentGrid({
   title,
@@ -38,8 +38,8 @@ export function AgentGrid({
       <div className={"grid gap-3 " + GRID_COLS}>
         {isLoading
           ? Array.from({ length: agents.length || 3 }).map((_, i) => (
-              <Card key={i} className="gap-2 py-3">
-                <CardHeader className="gap-1 px-3">
+              <Card key={i} className="gap-2.5 py-4">
+                <CardHeader className="gap-1 px-4">
                   <Skeleton className="h-4 w-24" />
                   <Skeleton className="h-3 w-16" />
                 </CardHeader>