Fix inbox row irregular heights on mobile from unread badge
- Give unread dot container fixed h-5 so rows are consistent height regardless of badge presence - Use flex-wrap on mobile so title gets its own line with line-clamp-2 - On sm+ screens, keep single-line truncated layout - Move timestamp to ml-auto with sm:order-last for clean wrapping Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -898,9 +898,9 @@ export function Inbox() {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={issue.id}
|
key={issue.id}
|
||||||
className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
|
className="flex items-start gap-3 px-4 py-3 transition-colors hover:bg-accent/50"
|
||||||
>
|
>
|
||||||
<span className="flex w-4 shrink-0 justify-center">
|
<span className="flex h-5 w-4 shrink-0 items-center justify-center">
|
||||||
{(isUnread || isFading) && (
|
{(isUnread || isFading) && (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
@@ -922,19 +922,21 @@ export function Inbox() {
|
|||||||
</span>
|
</span>
|
||||||
<Link
|
<Link
|
||||||
to={`/issues/${issue.identifier ?? issue.id}`}
|
to={`/issues/${issue.identifier ?? issue.id}`}
|
||||||
className="flex flex-1 min-w-0 cursor-pointer items-center gap-3 no-underline text-inherit"
|
className="flex flex-1 min-w-0 cursor-pointer flex-wrap items-center gap-x-3 gap-y-0.5 no-underline text-inherit sm:flex-nowrap"
|
||||||
>
|
>
|
||||||
<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="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="ml-auto shrink-0 text-xs text-muted-foreground sm:order-last">
|
||||||
<span className="shrink-0 text-xs text-muted-foreground">
|
|
||||||
{issue.lastExternalCommentAt
|
{issue.lastExternalCommentAt
|
||||||
? `commented ${timeAgo(issue.lastExternalCommentAt)}`
|
? `commented ${timeAgo(issue.lastExternalCommentAt)}`
|
||||||
: `updated ${timeAgo(issue.updatedAt)}`}
|
: `updated ${timeAgo(issue.updatedAt)}`}
|
||||||
</span>
|
</span>
|
||||||
|
<span className="w-full line-clamp-2 text-sm sm:w-0 sm:flex-1 sm:line-clamp-none sm:truncate">
|
||||||
|
{issue.title}
|
||||||
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user