External/roboco
1
0
Fork 0
mirror of https://github.com/rennf93/roboco.git synced 2026-08-03 07:23:24 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(panel): agent cards — intrinsic auto-fill grid, roomier cards

Browse Source 
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.
This commit is contained in:
Renn F
2026-07-15 17:17:19 +02:00
parent 3d1c20e95a
commit 77229b10b1
2 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
panel/src/components/agents/agent-card.tsx
+4 -4
View File
@@ -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
panel/src/components/agents/agent-grid.tsx
+6 -6
View File
@@ -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>