aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: mobile responsive layout, streamline agent budget display, and xs avatar size

Browse Source 
Make agents list force list view on mobile with condensed trailing
info. Add mobile bottom bar for config save/cancel and live run
indicator on agent detail. Make MetricCard, PageTabBar, Dashboard
tasks, and ActivityRow responsive for small screens. Add xs avatar
size for inline text flow. Remove redundant budget displays from
agent overview, properties panel, costs tab, and config form.
Add attachment activity verb labels.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-20 11:29:13 -06:00
parent a22af8f72f
commit 39f8d38528
11 changed files with 217 additions and 258 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
ui/src/components/Identity.tsx
View File

@@ -1,7 +1,7 @@
import { cn } from "@/lib/utils";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
type IdentitySize = "sm" | "default" | "lg";
type IdentitySize = "xs" | "sm" | "default" | "lg";
export interface IdentityProps {
name: string;
@@ -18,6 +18,7 @@ function deriveInitials(name: string): string {
}
const textSize: Record<IdentitySize, string> = {
xs: "text-sm",
sm: "text-xs",
default: "text-sm",
lg: "text-sm",
@@ -27,8 +28,8 @@ export function Identity({ name, avatarUrl, initials, size = "default", classNam
const displayInitials = initials ?? deriveInitials(name);
return (
<span className={cn("inline-flex items-center gap-1.5", size === "lg" && "gap-2", className)}>
<Avatar size={size}>
<span className={cn("inline-flex gap-1.5", size === "xs" ? "items-baseline gap-1" : "items-center", size === "lg" && "gap-2", className)}>
<Avatar size={size} className={size === "xs" ? "relative top-[2px]" : undefined}>
{avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
<AvatarFallback>{displayInitials}</AvatarFallback>
</Avatar>