From 5fe2a5cbb1f2d0f6c040f5705bc199157f12d38a Mon Sep 17 00:00:00 2001
From: scotttong <scott.tong@gmail.com>
Date: Tue, 2 Jun 2026 23:43:49 -0700
Subject: [PATCH] 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>
---
 ui/src/components/EntityRow.tsx |  4 +++-
 ui/src/pages/Agents.tsx         | 11 ++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/EntityRow.tsx b/ui/src/components/EntityRow.tsx
index 5bbef445f23..bbb5ad0a47d 100644
--- a/ui/src/components/EntityRow.tsx
+++ b/ui/src/components/EntityRow.tsx
@@ -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]">
diff --git a/ui/src/pages/Agents.tsx b/ui/src/pages/Agents.tsx
index 814a42133f5..900c64c41bc 100644
--- a/ui/src/pages/Agents.tsx
+++ b/ui/src/pages/Agents.tsx
@@ -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) ?? "—"}