mikkel/nexus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: improve layout and truncation in ReportsToPicker

Browse source 
- Enhanced button and text elements to ensure proper overflow handling and truncation for agent names and statuses.
- Adjusted class names for better responsiveness and visual consistency, particularly for unknown and terminated managers.
This commit is contained in:
Daniel Sousa 2026-03-20 20:33:36 +00:00
parent 17b6f6c8f7
commit 4587627f3c
No known key found for this signature in database
1 changed files with 17 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/src/components/ReportsToPicker.tsx
View file

@ -42,7 +42,7 @@ export function ReportsToPicker({
<button <button
type="button" type="button"
className={cn( className={cn(
"inline-flex items-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors", "inline-flex max-w-full min-w-0 items-center gap-1.5 overflow-hidden rounded-md border border-border px-2 py-1 text-xs hover:bg-accent/50 transition-colors",
terminatedManager && "border-amber-600/45 bg-amber-500/5", terminatedManager && "border-amber-600/45 bg-amber-500/5",
disabled && "opacity-60 cursor-not-allowed", disabled && "opacity-60 cursor-not-allowed",
)} )}
@ -50,20 +50,27 @@ export function ReportsToPicker({
> >
{unknownManager ? ( {unknownManager ? (
<> <>
<User className="h-3 w-3 text-muted-foreground" /> <User className="h-3 w-3 shrink-0 text-muted-foreground" />
<span className="text-muted-foreground">Unknown manager (stale ID)</span> <span className="min-w-0 truncate text-muted-foreground">Unknown manager (stale ID)</span>
</> </>
) : current ? ( ) : current ? (
<> <>
<AgentIcon icon={current.icon} className="h-3 w-3 text-muted-foreground" /> <AgentIcon icon={current.icon} className="h-3 w-3 shrink-0 text-muted-foreground" />
<span className={cn(terminatedManager && "text-amber-900 dark:text-amber-200")}> <span
className={cn(
"min-w-0 truncate",
terminatedManager && "text-amber-900 dark:text-amber-200",
)}
>
{`Reports to ${current.name}${terminatedManager ? " (terminated)" : ""}`} {`Reports to ${current.name}${terminatedManager ? " (terminated)" : ""}`}
</span> </span>
</> </>
) : ( ) : (
<> <>
<User className="h-3 w-3 text-muted-foreground" /> <User className="h-3 w-3 shrink-0 text-muted-foreground" />
{disabled ? disabledEmptyLabel : chooseLabel} <span className="min-w-0 truncate">
{disabled ? disabledEmptyLabel : chooseLabel}
</span>
</> </>
)} )}
</button> </button>
@ -83,9 +90,9 @@ export function ReportsToPicker({
No manager No manager
</button> </button>
{terminatedManager && ( {terminatedManager && (
<div className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground border-b border-border mb-0.5"> <div className="flex min-w-0 items-center gap-2 overflow-hidden px-2 py-1.5 text-xs text-muted-foreground border-b border-border mb-0.5">
<AgentIcon icon={current.icon} className="shrink-0 h-3 w-3" /> <AgentIcon icon={current.icon} className="shrink-0 h-3 w-3" />
<span className="truncate min-w-0"> <span className="min-w-0 truncate">
Current: {current.name} (terminated) Current: {current.name} (terminated)
</span> </span>
</div> </div>
@ -109,7 +116,7 @@ export function ReportsToPicker({
}} }}
> >
<AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" /> <AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
<span className="truncate min-w-0">{a.name}</span> <span className="min-w-0 truncate">{a.name}</span>
<span className="text-muted-foreground ml-auto shrink-0">{roleLabels[a.role] ?? a.role}</span> <span className="text-muted-foreground ml-auto shrink-0">{roleLabels[a.role] ?? a.role}</span>
</button> </button>
))} ))}