From 29514606bb0b1529a1b8ea70ac4f905157a8fd41 Mon Sep 17 00:00:00 2001
From: dotta <dotta@example.com>
Date: Mon, 6 Apr 2026 20:04:12 -0500
Subject: [PATCH] Refactor user message avatar to flex layout

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>
---
 ui/src/components/IssueChatThread.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/IssueChatThread.tsx b/ui/src/components/IssueChatThread.tsx
index 56c0b7c5..4ce63073 100644
--- a/ui/src/components/IssueChatThread.tsx
+++ b/ui/src/components/IssueChatThread.tsx
@@ -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>