Fix reply username overflow (#1501)

* fix reply overflow

* fix shrinkable typing indicator

* fix message avatar hover & cursor

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>

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': {

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}

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}

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),
 });