PAP-61: fix agent names collapsing to zero width in agents list view

The list/org rows packed adapter + model + last-heartbeat + status + four
action buttons into a shrink-0 trailing block. On typical laptop widths this
squeezed the flex-1 min-w-0 title to zero, so agent names were invisible.

- EntityRow: add optional titleClassName so callers can guarantee a min title width
- Agents list + org rows: give the name a min-w-[7rem] floor; move the wide
  adapter (w-28) + model (w-36) columns to 2xl only, keeping last-heartbeat +
  status + actions at all widths. Names now always render; metadata reappears
  on wide screens.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
scotttongandPaperclip committed 2026-06-05 15:13:29 -07:00
1 parent bf58599848
commit 5fe2a5cbb1
2 files changed
+9 -6

No files matched your search

+3 -1
View File
@@ -12,6 +12,7 @@ interface EntityRowProps {
to?: string;
onClick?: () => void;
className?: string;
titleClassName?: string;
reserveSubtitleSpace?: boolean;
}
@@ -25,6 +26,7 @@ export function EntityRow({
to,
onClick,
className,
titleClassName,
reserveSubtitleSpace,
}: EntityRowProps) {
const isClickable = !!(to || onClick);
@@ -38,7 +40,7 @@ export function EntityRow({
const content = (
<>
{leading && <div className="flex items-center gap-2 shrink-0">{leading}</div>}
<div className="flex-1 min-w-0">
<div className={cn("flex-1 min-w-0", titleClassName)}>
<div className="flex items-center gap-2">
{identifier && (
<span className="text-xs text-muted-foreground font-mono shrink-0 relative top-[1px]">
+6 -5
View File
@@ -238,6 +238,7 @@ export function Agents() {
<EntityRow
key={agent.id}
title={agent.name}
titleClassName="min-w-[7rem]"
subtitle={`${roleLabels[agent.role] ?? agent.role}${agent.title ? ` - ${agent.title}` : ""}`}
to={agentUrl(agent)}
className={cn(
@@ -273,11 +274,11 @@ export function Agents() {
liveCount={liveRunByAgent.get(agent.id)!.liveCount}
/>
)}
<span className="w-28 whitespace-nowrap text-left font-mono text-xs text-muted-foreground">
<span className="hidden 2xl:inline w-28 whitespace-nowrap text-left font-mono text-xs text-muted-foreground">
{getAdapterLabel(agent.adapterType)}
</span>
<span
className="w-36 truncate text-left font-mono text-xs text-muted-foreground"
className="hidden 2xl:inline w-36 truncate text-left font-mono text-xs text-muted-foreground"
title={getConfiguredModel(agent) ?? undefined}
>
{getConfiguredModel(agent) ?? "—"}
@@ -417,7 +418,7 @@ function OrgTreeNode({
<span className="relative flex h-2.5 w-2.5 shrink-0">
<span className={`absolute inline-flex h-full w-full rounded-full ${statusColor}`} />
</span>
<div className="flex-1 min-w-0">
<div className="flex-1 min-w-[7rem]">
<span className="text-sm font-medium">{node.name}</span>
<span className="text-xs text-muted-foreground ml-2">
{roleLabels[node.role] ?? node.role}
@@ -446,11 +447,11 @@ function OrgTreeNode({
)}
{agent && (
<>
<span className="w-28 whitespace-nowrap text-left font-mono text-xs text-muted-foreground">
<span className="hidden 2xl:inline w-28 whitespace-nowrap text-left font-mono text-xs text-muted-foreground">
{getAdapterLabel(agent.adapterType)}
</span>
<span
className="w-36 truncate text-left font-mono text-xs text-muted-foreground"
className="hidden 2xl:inline w-36 truncate text-left font-mono text-xs text-muted-foreground"
title={getConfiguredModel(agent) ?? undefined}
>
{getConfiguredModel(agent) ?? "—"}