ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-14 01:50:39 +09:00
Code Issues Projects Releases Packages Wiki Activity

Refactor user message avatar to flex layout

Browse source 
Replace absolute positioning (-right-8) with a flex row layout for the
"You" avatar. The avatar now sits naturally to the right of the bubble
via flex justify-end + gap-2.5, avoiding overflow clipping issues.
Max-width 85% is on the content column, not the bubble div, so the
bubble + avatar together fill the row naturally.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
dotta 2026-04-06 20:04:12 -05:00
parent 627fbc80ac
commit 29514606bb
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

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