From aa329f4b8ac009b0eaedf94b88ff62755e630f20 Mon Sep 17 00:00:00 2001
From: Forgotten <forgottenrunes@protonmail.com>
Date: Fri, 20 Feb 2026 11:35:59 -0600
Subject: [PATCH] Fix xs avatar alignment and dashboard task row layout

Adjust xs avatar vertical offset from top-[2px] to -top-px for better
baseline alignment. Restructure dashboard recent tasks rows so the
timestamp sits right-aligned outside the title text flow and title
truncates properly on desktop.

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

diff --git a/ui/src/components/Identity.tsx b/ui/src/components/Identity.tsx
index 79ba86de..6f9af851 100644
--- a/ui/src/components/Identity.tsx
+++ b/ui/src/components/Identity.tsx
@@ -29,7 +29,7 @@ export function Identity({ name, avatarUrl, initials, size = "default", classNam
 
   return (
     <span className={cn("inline-flex gap-1.5", size === "xs" ? "items-baseline gap-1" : "items-center", size === "lg" && "gap-2", className)}>
-      <Avatar size={size} className={size === "xs" ? "relative top-[2px]" : undefined}>
+      <Avatar size={size} className={size === "xs" ? "relative -top-px" : undefined}>
         {avatarUrl && <AvatarImage src={avatarUrl} alt={name} />}
         <AvatarFallback>{displayInitials}</AvatarFallback>
       </Avatar>
diff --git a/ui/src/pages/Dashboard.tsx b/ui/src/pages/Dashboard.tsx
index 5f74803b..40de9753 100644
--- a/ui/src/pages/Dashboard.tsx
+++ b/ui/src/pages/Dashboard.tsx
@@ -266,23 +266,25 @@ export function Dashboard() {
                       className="px-4 py-2 text-sm cursor-pointer hover:bg-accent/50 transition-colors"
                       onClick={() => navigate(`/issues/${issue.id}`)}
                     >
-                      <div className="flex items-start gap-2">
-                        <div className="flex items-center gap-2 shrink-0 mt-0.5">
-                          <PriorityIcon priority={issue.priority} />
-                          <StatusIcon status={issue.status} />
+                      <div className="flex gap-3">
+                        <div className="flex items-start gap-2 min-w-0 flex-1">
+                          <div className="flex items-center gap-2 shrink-0 mt-0.5">
+                            <PriorityIcon priority={issue.priority} />
+                            <StatusIcon status={issue.status} />
+                          </div>
+                          <p className="min-w-0 flex-1 sm:truncate">
+                            <span>{issue.title}</span>
+                            {issue.assigneeAgentId && (() => {
+                              const name = agentName(issue.assigneeAgentId);
+                              return name
+                                ? <span className="hidden sm:inline"><Identity name={name} size="sm" className="ml-2 inline-flex" /></span>
+                                : null;
+                            })()}
+                          </p>
                         </div>
-                        <p className="min-w-0 flex-1">
-                          <span>{issue.title}</span>
-                          {issue.assigneeAgentId && (() => {
-                            const name = agentName(issue.assigneeAgentId);
-                            return name
-                              ? <span className="hidden sm:inline"><Identity name={name} size="sm" className="ml-2 inline-flex" /></span>
-                              : null;
-                          })()}
-                          <span className="text-xs text-muted-foreground ml-2">
-                            {timeAgo(issue.updatedAt)}
-                          </span>
-                        </p>
+                        <span className="text-xs text-muted-foreground shrink-0 pt-0.5">
+                          {timeAgo(issue.updatedAt)}
+                        </span>
                       </div>
                     </div>
                   ))}