mirror of
https://github.com/paperclipai/paperclip.git
synced 2026-10-23 17:33:51 +02:00
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:
1 parent
bf58599848
commit
5fe2a5cbb1
2 files changed
+9
-6
No files matched your search
@@ -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]">
|
||||
|
||||
@@ -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) ?? "—"}
|
||||
|
||||
Reference in new issue
Block a user