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

fix(ui): mobile viewport, scrollable popovers, and actor labels

Browse Source 
- Set viewport-fit=cover and disable user scaling for mobile PWA feel
- Wrap assignee/project popover lists in scrollable containers
- Remove rounded-t-sm from stacked chart bars for cleaner rendering
- Prevent filter bar icons from shrinking on narrow screens
- Show "Board" instead of raw user IDs in activity feeds and toasts
- Surface server error message in health API failures

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Forgotten
2026-02-23 19:44:02 -06:00
parent 85c0b9a3dc
commit d2f9ade30c
8 changed files with 107 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
ui/src/components/NewIssueDialog.tsx
View File

@@ -396,35 +396,37 @@ export function NewIssueDialog() {
onChange={(e) => setAssigneeSearch(e.target.value)}
autoFocus
/>
<button
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
!assigneeId && "bg-accent"
)}
onClick={() => { setAssigneeId(""); setAssigneeOpen(false); }}
>
No assignee
</button>
{(agents ?? [])
.filter((a) => a.status !== "terminated")
.filter((a) => {
if (!assigneeSearch.trim()) return true;
const q = assigneeSearch.toLowerCase();
return a.name.toLowerCase().includes(q);
})
.map((a) => (
<div className="max-h-48 overflow-y-auto overscroll-contain">
<button
key={a.id}
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
a.id === assigneeId && "bg-accent"
!assigneeId && "bg-accent"
)}
onClick={() => { setAssigneeId(a.id); setAssigneeOpen(false); }}
onClick={() => { setAssigneeId(""); setAssigneeOpen(false); }}
>
<AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
{a.name}
No assignee
</button>
))}
{(agents ?? [])
.filter((a) => a.status !== "terminated")
.filter((a) => {
if (!assigneeSearch.trim()) return true;
const q = assigneeSearch.toLowerCase();
return a.name.toLowerCase().includes(q);
})
.map((a) => (
<button
key={a.id}
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50",
a.id === assigneeId && "bg-accent"
)}
onClick={() => { setAssigneeId(a.id); setAssigneeOpen(false); }}
>
<AgentIcon icon={a.icon} className="shrink-0 h-3 w-3 text-muted-foreground" />
{a.name}
</button>
))}
</div>
</PopoverContent>
</Popover>
@@ -449,31 +451,33 @@ export function NewIssueDialog() {
</button>
</PopoverTrigger>
<PopoverContent className="w-fit min-w-[11rem] p-1" align="start">
<button
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 whitespace-nowrap",
!projectId && "bg-accent"
)}
onClick={() => { setProjectId(""); setProjectOpen(false); }}
>
No project
</button>
{(projects ?? []).map((p) => (
<div className="max-h-48 overflow-y-auto overscroll-contain">
<button
key={p.id}
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 whitespace-nowrap",
p.id === projectId && "bg-accent"
!projectId && "bg-accent"
)}
onClick={() => { setProjectId(p.id); setProjectOpen(false); }}
onClick={() => { setProjectId(""); setProjectOpen(false); }}
>
<span
className="shrink-0 h-3 w-3 rounded-sm"
style={{ backgroundColor: p.color ?? "#6366f1" }}
/>
{p.name}
No project
</button>
))}
{(projects ?? []).map((p) => (
<button
key={p.id}
className={cn(
"flex items-center gap-2 w-full px-2 py-1.5 text-xs rounded hover:bg-accent/50 whitespace-nowrap",
p.id === projectId && "bg-accent"
)}
onClick={() => { setProjectId(p.id); setProjectOpen(false); }}
>
<span
className="shrink-0 h-3 w-3 rounded-sm"
style={{ backgroundColor: p.color ?? "#6366f1" }}
/>
{p.name}
</button>
))}
</div>
</PopoverContent>
</Popover>