From d8a734268670c40d1f6a20d49baff6ebe866e4dd Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Mon, 6 Apr 2026 17:36:28 -0500
Subject: [PATCH] Fix avatar positioning and activity line alignment in chat

- Move "You" avatar outside content column using -right-8 negative
  positioning instead of right-0 inside pr-8 padding
- Remove pr-8 padding from user message container so bubble touches
  the column edge
- Align activity event and run timeline avatars/gaps with chat messages
  (sm size + gap-2.5 instead of xs + gap-2)

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueChatThread.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index bdbab9a0..16861b4a 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -360,7 +360,7 @@ function IssueChatUserMessage() {
 
   return (
     <MessagePrimitive.Root id={anchorId}>
-      <div className="group relative pr-8">
+      <div className="group relative">
         <div className="flex flex-col items-end">
           <div
             className={cn(
@@ -435,7 +435,7 @@ function IssueChatUserMessage() {
           </div>
         </div>
 
-        <Avatar size="sm" className="absolute right-0 top-1 shrink-0">
+        <Avatar size="sm" className="absolute -right-8 top-1 shrink-0">
           <AvatarFallback>You</AvatarFallback>
         </Avatar>
       </div>
@@ -894,12 +894,12 @@ function IssueChatSystemMessage() {
 
     return (
       <MessagePrimitive.Root id={anchorId}>
-        <div className="flex items-start gap-2 py-1">
-          <Avatar size="xs" className="mt-0.5">
+        <div className="flex items-start gap-2.5 py-1">
+          <Avatar size="sm" className="mt-0.5">
             {agentIcon ? (
-              <AvatarFallback><AgentIcon icon={agentIcon} className="h-3 w-3" /></AvatarFallback>
+              <AvatarFallback><AgentIcon icon={agentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
             ) : (
-              <AvatarFallback className="text-[9px]">{initialsForName(actorName)}</AvatarFallback>
+              <AvatarFallback>{initialsForName(actorName)}</AvatarFallback>
             )}
           </Avatar>
           <div className="flex-1">
@@ -915,12 +915,12 @@ function IssueChatSystemMessage() {
   if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
     return (
       <MessagePrimitive.Root id={anchorId}>
-        <div className="flex items-center gap-2 py-1">
-          <Avatar size="xs">
+        <div className="flex items-center gap-2.5 py-1">
+          <Avatar size="sm">
             {runAgentIcon ? (
-              <AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3 w-3" /></AvatarFallback>
+              <AvatarFallback><AgentIcon icon={runAgentIcon} className="h-3.5 w-3.5" /></AvatarFallback>
             ) : (
-              <AvatarFallback className="text-[9px]">{initialsForName(displayedRunAgentName)}</AvatarFallback>
+              <AvatarFallback>{initialsForName(displayedRunAgentName)}</AvatarFallback>
             )}
           </Avatar>