From c7e5c1fce813af88eba15d62c9294d53d2b858b8 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 24 Oct 2023 22:21:39 +1100
Subject: [PATCH] Fix reply username overflow (#1501)

* fix reply overflow

* fix shrinkable typing indicator

* fix message avatar hover & cursor
---
 src/app/components/message/Reply.tsx                    | 6 +++++-
 src/app/components/message/layout/layout.css.ts         | 2 +-
 src/app/components/typing-indicator/TypingIndicator.tsx | 1 +
 src/app/organisms/room/message/Message.tsx              | 8 +++++++-
 src/app/organisms/room/message/styles.css.ts            | 4 ++++
 5 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index a8800fa88..6eaab31ed 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -67,7 +67,11 @@ export const Reply = as<'div', ReplyProps>(
         {...props}
         ref={ref}
       >
-        <Box style={{ color: colorMXID(sender ?? eventId) }} alignItems="Center" shrink="No">
+        <Box
+          style={{ color: colorMXID(sender ?? eventId), maxWidth: '50%' }}
+          alignItems="Center"
+          shrink="No"
+        >
           <Icon src={Icons.ReplyArrow} size="50" />
           {sender && (
             <Text size="T300" truncate>
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index ff31baa59..7b1a267df 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/components/typing-indicator/TypingIndicator.tsx b/src/app/components/typing-indicator/TypingIndicator.tsx
index 336903594..e52558738 100644
--- a/src/app/components/typing-indicator/TypingIndicator.tsx
+++ b/src/app/components/typing-indicator/TypingIndicator.tsx
@@ -10,6 +10,7 @@ export const TypingIndicator = as<'div', TypingIndicatorProps>(({ size, style, .
   <Box
     as="span"
     alignItems="Center"
+    shrink="No"
     style={{ gap: toRem(size === '300' ? 1 : 2), ...style }}
     {...props}
     ref={ref}
diff --git a/src/app/organisms/room/message/Message.tsx b/src/app/organisms/room/message/Message.tsx
index e26f3662b..14996a9a3 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 23615709d..9cb0f2efa 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),
 });