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

14
ui/src/components/MetricCard.tsx
View File

@@ -13,27 +13,27 @@ interface MetricCardProps {
export function MetricCard({ icon: Icon, value, label, description, onClick }: MetricCardProps) {
return (
<Card>
<CardContent className="p-4">
<div className="flex gap-3">
<CardContent className="p-3 sm:p-4">
<div className="flex gap-2 sm:gap-3">
<div className="flex-1 min-w-0">
<p
className={`text-2xl font-bold${onClick ? " cursor-pointer" : ""}`}
className={`text-lg sm:text-2xl font-bold${onClick ? " cursor-pointer" : ""}`}
onClick={onClick}
>
{value}
</p>
<p
className={`text-sm text-muted-foreground${onClick ? " cursor-pointer" : ""}`}
className={`text-xs sm:text-sm text-muted-foreground${onClick ? " cursor-pointer" : ""}`}
onClick={onClick}
>
{label}
</p>
{description && (
<div className="text-xs text-muted-foreground mt-1">{description}</div>
<div className="text-[11px] sm:text-xs text-muted-foreground mt-1 hidden sm:block">{description}</div>
)}
</div>
<div className="bg-muted p-2 rounded-md h-fit shrink-0">
<Icon className="h-4 w-4 text-muted-foreground" />
<div className="bg-muted p-1.5 sm:p-2 rounded-md h-fit shrink-0">
<Icon className="h-3.5 w-3.5 sm:h-4 sm:w-4 text-muted-foreground" />
</div>
</div>
</CardContent>