hanh.tonguyen/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix stale work section overflowing on mobile in inbox

Browse Source 
Add min-w-0 and overflow-hidden to the stale work row flex containers
so the title truncates properly on narrow screens. Add shrink-0 to
identifier and assignee spans to prevent them from being compressed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dotta
2026-03-07 19:52:29 -06:00
parent 667d23e79e
commit ba080cb4dd
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/pages/Inbox.tsx
View File

@@ -841,26 +841,26 @@ export function Inbox() {
{staleIssues.map((issue) => ( {staleIssues.map((issue) => (
<div <div
key={issue.id} key={issue.id}
className="group/stale relative flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50" className="group/stale relative flex items-center gap-3 overflow-hidden px-4 py-3 transition-colors hover:bg-accent/50"
> >
<Link <Link
to={`/issues/${issue.identifier ?? issue.id}`} to={`/issues/${issue.identifier ?? issue.id}`}
className="flex flex-1 cursor-pointer items-center gap-3 no-underline text-inherit" className="flex min-w-0 flex-1 cursor-pointer items-center gap-3 no-underline text-inherit"
> >
<Clock className="h-4 w-4 shrink-0 text-muted-foreground" /> <Clock className="h-4 w-4 shrink-0 text-muted-foreground" />
<PriorityIcon priority={issue.priority} /> <PriorityIcon priority={issue.priority} />
<StatusIcon status={issue.status} /> <StatusIcon status={issue.status} />
<span className="text-xs font-mono text-muted-foreground"> <span className="shrink-0 text-xs font-mono text-muted-foreground">
{issue.identifier ?? issue.id.slice(0, 8)} {issue.identifier ?? issue.id.slice(0, 8)}
</span> </span>
<span className="flex-1 truncate text-sm">{issue.title}</span> <span className="min-w-0 flex-1 truncate text-sm">{issue.title}</span>
{issue.assigneeAgentId && {issue.assigneeAgentId &&
(() => { (() => {
const name = agentName(issue.assigneeAgentId); const name = agentName(issue.assigneeAgentId);
return name ? ( return name ? (
<Identity name={name} size="sm" /> <Identity name={name} size="sm" />
) : ( ) : (
<span className="font-mono text-xs text-muted-foreground"> <span className="shrink-0 font-mono text-xs text-muted-foreground">
{issue.assigneeAgentId.slice(0, 8)} {issue.assigneeAgentId.slice(0, 8)}
</span> </span>
); );