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