From 220a8f304496b6c0743e0462fee3f598bad70743 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 24 Oct 2023 08:50:36 +0530
Subject: [PATCH] fix message avatar hover & cursor

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

diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index ff31baa5..7b1a267d 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -118,8 +118,8 @@ export const CompactHeader = style([
 
 export const AvatarBase = style({
   paddingTop: toRem(4),
-  cursor: 'pointer',
   transition: 'transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97)',
+  alignSelf: 'start',
 
   selectors: {
     '&:hover': {
diff --git a/src/app/organisms/room/message/Message.tsx b/src/app/organisms/room/message/Message.tsx
index e26f3662..14996a9a 100644
--- a/src/app/organisms/room/message/Message.tsx
+++ b/src/app/organisms/room/message/Message.tsx
@@ -654,7 +654,13 @@ export const Message = as<'div', MessageProps>(
 
     const avatarJSX = !collapse && messageLayout !== 1 && (
       <AvatarBase>
-        <Avatar as="button" size="300" data-user-id={senderId} onClick={onUserClick}>
+        <Avatar
+          className={css.MessageAvatar}
+          as="button"
+          size="300"
+          data-user-id={senderId}
+          onClick={onUserClick}
+        >
           {senderAvatarMxc ? (
             <AvatarImage
               src={mx.mxcUrlToHttp(senderAvatarMxc, 48, 48, 'crop') ?? senderAvatarMxc}
diff --git a/src/app/organisms/room/message/styles.css.ts b/src/app/organisms/room/message/styles.css.ts
index 23615709..9cb0f2ef 100644
--- a/src/app/organisms/room/message/styles.css.ts
+++ b/src/app/organisms/room/message/styles.css.ts
@@ -56,6 +56,10 @@ export const MessageOptionsBar = style([
   },
 ]);
 
+export const MessageAvatar = style({
+  cursor: 'pointer',
+});
+
 export const MessageQuickReaction = style({
   minWidth: toRem(32),
 });