From 0c4cef0ff1e32ebd8a5d2e62bae5eb08e75e1309 Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Mon, 30 Mar 2026 17:09:21 +0800
Subject: [PATCH] fix(issues): improve timeline activity entry alignment and
 overflow

- Add items-center for vertical centering between icons and text
- Add truncate on activity text to prevent line wrapping
- Unify icon/avatar sizes to 16px for visual consistency
- Remove connector line (will revisit later)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../issues/components/issue-detail.tsx        | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/apps/web/features/issues/components/issue-detail.tsx b/apps/web/features/issues/components/issue-detail.tsx
index d475d050..987d4f77 100644
--- a/apps/web/features/issues/components/issue-detail.tsx
+++ b/apps/web/features/issues/components/issue-detail.tsx
@@ -928,30 +928,26 @@ export function IssueDetail({ issueId, onDelete, defaultSidebarOpen = true, layo
                         const isStatusChange = entry.action === "status_changed";
                         const isPriorityChange = entry.action === "priority_changed";
                         const isDueDateChange = entry.action === "due_date_changed";
-                        const isLast = idx === group.entries.length - 1;
 
                         let leadIcon: React.ReactNode;
                         if (isStatusChange && details.to) {
-                          leadIcon = <StatusIcon status={details.to as IssueStatus} className="h-3.5 w-3.5 shrink-0" />;
+                          leadIcon = <StatusIcon status={details.to as IssueStatus} className="h-4 w-4 shrink-0" />;
                         } else if (isPriorityChange && details.to) {
-                          leadIcon = <PriorityIcon priority={details.to as IssuePriority} className="h-3.5 w-3.5 shrink-0" />;
+                          leadIcon = <PriorityIcon priority={details.to as IssuePriority} className="h-4 w-4 shrink-0" />;
                         } else if (isDueDateChange) {
-                          leadIcon = <Calendar className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />;
+                          leadIcon = <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />;
                         } else {
-                          leadIcon = <ActorAvatar actorType={entry.actor_type} actorId={entry.actor_id} size={14} />;
+                          leadIcon = <ActorAvatar actorType={entry.actor_type} actorId={entry.actor_id} size={16} />;
                         }
 
                         return (
-                          <div key={entry.id} className="relative flex text-xs text-muted-foreground">
-                            <div className="mr-2.5 flex w-3.5 shrink-0 justify-center">
-                              <div className="flex h-5 items-center">{leadIcon}</div>
+                          <div key={entry.id} className="flex items-center text-xs text-muted-foreground">
+                            <div className="mr-2 flex w-4 shrink-0 justify-center">
+                              {leadIcon}
                             </div>
-                            {!isLast && (
-                              <div className="absolute left-[7px] top-5 h-3 w-px bg-border" />
-                            )}
-                            <div className="flex flex-1 items-baseline gap-1">
-                              <span className="font-medium">{getActorName(entry.actor_type, entry.actor_id)}</span>
-                              <span>{formatActivity(entry, getActorName)}</span>
+                            <div className="flex min-w-0 flex-1 items-center gap-1">
+                              <span className="shrink-0 font-medium">{getActorName(entry.actor_type, entry.actor_id)}</span>
+                              <span className="truncate">{formatActivity(entry, getActorName)}</span>
                               <Tooltip>
                                 <TooltipTrigger
                                   render={