From ce8fe38ffc8f9804a182460ace866b9b98c9a73d Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sat, 7 Mar 2026 20:04:32 -0600
Subject: [PATCH] Unify mobile issue row layout across issues, inbox, and
 dashboard

Add PriorityIcon and timeAgo to IssuesList mobile rows to match the
pattern used in Inbox and Dashboard. Align Dashboard row padding to
match Inbox. All mobile issue rows now show: title (2-line clamp),
then priority + status + identifier + relative time.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/components/IssuesList.tsx | 6 ++++--
 ui/src/pages/Dashboard.tsx       | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 4abd2cea..498752b4 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -7,6 +7,7 @@ import { issuesApi } from "../api/issues";
 import { queryKeys } from "../lib/queryKeys";
 import { groupBy } from "../lib/groupBy";
 import { formatDate, cn } from "../lib/utils";
+import { timeAgo } from "../lib/timeAgo";
 import { StatusIcon } from "./StatusIcon";
 import { PriorityIcon } from "./PriorityIcon";
 import { EmptyState } from "./EmptyState";
@@ -619,13 +620,14 @@ export function IssuesList({
                   <span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
                     {/* Spacer matching caret width so status icon aligns with group title (hidden on mobile) */}
                     <span className="w-3.5 shrink-0 hidden sm:block" />
+                    <PriorityIcon priority={issue.priority} />
                     <span className="shrink-0" onClick={(e) => { e.preventDefault(); e.stopPropagation(); }}>
                       <StatusIcon
                         status={issue.status}
                         onChange={(s) => onUpdateIssue(issue.id, { status: s })}
                       />
                     </span>
-                    <span className="text-sm text-muted-foreground font-mono shrink-0">
+                    <span className="text-xs text-muted-foreground font-mono shrink-0">
                       {issue.identifier ?? issue.id.slice(0, 8)}
                     </span>
                     {liveIssueIds?.has(issue.id) && (
@@ -639,7 +641,7 @@ export function IssuesList({
                     )}
                     <span className="text-xs text-muted-foreground sm:hidden">&middot;</span>
                     <span className="text-xs text-muted-foreground sm:hidden">
-                      {formatDate(issue.createdAt)}
+                      {timeAgo(issue.updatedAt)}
                     </span>
                   </span>
 
diff --git a/ui/src/pages/Dashboard.tsx b/ui/src/pages/Dashboard.tsx
index e4b8747e..23296bba 100644
--- a/ui/src/pages/Dashboard.tsx
+++ b/ui/src/pages/Dashboard.tsx
@@ -313,7 +313,7 @@ export function Dashboard() {
                     <Link
                       key={issue.id}
                       to={`/issues/${issue.identifier ?? issue.id}`}
-                      className="px-4 py-2.5 text-sm cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit block"
+                      className="px-4 py-3 text-sm cursor-pointer hover:bg-accent/50 transition-colors no-underline text-inherit block"
                     >
                       <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
                         <span className="line-clamp-2 text-sm sm:order-2 sm:flex-1 sm:min-w-0 sm:line-clamp-none sm:truncate">