gb_flea/paperclip
1
0
Fork 0
forked from farhoodlabs/paperclip
Code Pull Requests Activity

Fix avatar positioning and activity line alignment in chat

Browse Source 
- 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>
This commit is contained in:
dotta
2026-04-06 17:36:28 -05:00
parent 3574a3bf49
commit d8a7342686
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/IssueChatThread.tsx
+10 -10
View File
@@ -360,7 +360,7 @@ function IssueChatUserMessage() {
return ( return (
<MessagePrimitive.Root id={anchorId}> <MessagePrimitive.Root id={anchorId}>
<div className="group relative pr-8"> <div className="group relative">
<div className="flex flex-col items-end"> <div className="flex flex-col items-end">
<div <div
className={cn( className={cn(
@@ -435,7 +435,7 @@ function IssueChatUserMessage() {
</div> </div>
</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> <AvatarFallback>You</AvatarFallback>
</Avatar> </Avatar>
</div> </div>
@@ -894,12 +894,12 @@ function IssueChatSystemMessage() {
return ( return (
<MessagePrimitive.Root id={anchorId}> <MessagePrimitive.Root id={anchorId}>
<div className="flex items-start gap-2 py-1"> <div className="flex items-start gap-2.5 py-1">
<Avatar size="xs" className="mt-0.5"> <Avatar size="sm" className="mt-0.5">
{agentIcon ? ( {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> </Avatar>
<div className="flex-1"> <div className="flex-1">
@@ -915,12 +915,12 @@ function IssueChatSystemMessage() {
if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) { if (custom.kind === "run" && runId && runAgentId && displayedRunAgentName && runStatus) {
return ( return (
<MessagePrimitive.Root id={anchorId}> <MessagePrimitive.Root id={anchorId}>
<div className="flex items-center gap-2 py-1"> <div className="flex items-center gap-2.5 py-1">
<Avatar size="xs"> <Avatar size="sm">
{runAgentIcon ? ( {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> </Avatar>