ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-17 03:10:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

Move user avatar outside content column to right margin

Browse source 
Use relative positioning with pr-8 reserved space and absolute
positioning for the avatar, so it sits outside the content column
boundary while the bubble's right edge aligns with the column edge.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-06 17:16:16 -05:00
parent f94fe57d10
commit 3574a3bf49
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
ui/src/components/IssueChatThread.tsx
View file

@ -360,11 +360,11 @@ function IssueChatUserMessage() {
return ( return (
<MessagePrimitive.Root id={anchorId}> <MessagePrimitive.Root id={anchorId}>
<div className="group flex items-start justify-end gap-2"> <div className="group relative pr-8">
<div className="flex max-w-[85%] flex-col items-end"> <div className="flex flex-col items-end">
<div <div
className={cn( className={cn(
"min-w-0 overflow-hidden rounded-2xl px-4 py-2.5", "max-w-[85%] min-w-0 overflow-hidden rounded-2xl px-4 py-2.5",
queued queued
? "bg-amber-50/80 dark:bg-amber-500/10" ? "bg-amber-50/80 dark:bg-amber-500/10"
: "bg-muted", : "bg-muted",
@ -435,7 +435,7 @@ function IssueChatUserMessage() {
</div> </div>
</div> </div>
<Avatar size="sm" className="mt-1 shrink-0"> <Avatar size="sm" className="absolute right-0 top-1 shrink-0">
<AvatarFallback>You</AvatarFallback> <AvatarFallback>You</AvatarFallback>
</Avatar> </Avatar>
</div> </div>