From 5422958e544fb1ee77f3171249e4ef3b7009a113 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 17 Sep 2025 21:53:54 +0530
Subject: [PATCH] fix avatar username relative alignment

---
 src/app/features/room/message/Message.tsx   | 7 ++++---
 src/app/features/room/message/styles.css.ts | 4 ++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 44e93e61..5cfeecc8 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -791,7 +791,9 @@ export const Message = as<'div', MessageProps>(
     );
 
     const avatarJSX = !collapse && messageLayout !== MessageLayout.Compact && (
-      <AvatarBase>
+      <AvatarBase
+        className={messageLayout === MessageLayout.Bubble ? css.BubbleAvatarBase : undefined}
+      >
         <Avatar
           className={css.MessageAvatar}
           as="button"
@@ -1141,8 +1143,7 @@ export const Message = as<'div', MessageProps>(
           </CompactLayout>
         )}
         {messageLayout === MessageLayout.Bubble && (
-          <BubbleLayout before={avatarJSX} onContextMenu={handleContextMenu}>
-            {headerJSX}
+          <BubbleLayout before={avatarJSX} header={headerJSX} onContextMenu={handleContextMenu}>
             {msgContentJSX}
           </BubbleLayout>
         )}
diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts
index cd3c3bb7..dced5467 100644
--- a/src/app/features/room/message/styles.css.ts
+++ b/src/app/features/room/message/styles.css.ts
@@ -24,6 +24,10 @@ export const MessageOptionsBar = style([
   },
 ]);
 
+export const BubbleAvatarBase = style({
+  paddingTop: toRem(6),
+});
+
 export const MessageAvatar = style({
   cursor: 'pointer',
 });