Fix reply username overflow (#1501)

* fix reply overflow

* fix shrinkable typing indicator

* fix message avatar hover & cursor

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index a8800fa88aa0dd9fe32d0b5aa4a26708bc4c6d8d..6eaab31ed4d9bf1993a73f23d06a5c7c9fe7e592 100644 (file)
--- 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 ff31baa598e1f1002bc2741dfa0aa3f2c38d4abe..7b1a267df07618a1afc0f2728c86f13c1107a535 100644 (file)
--- 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 336903594bec5125fe0782d27fc80ead650c8e42..e52558738e44730efc0d6e0e822c71eb15c190a9 100644 (file)
--- 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 e26f3662b0a0234caca9a9423b61f55192c28805..14996a9a300f21db31fc1004a616a6e34b6490d4 100644 (file)
--- 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 23615709d3fa5d19fb83fd1554e997a937e4d0ec..9cb0f2efa758dc68cd4f48b45094006024eb6410 100644 (file)
--- 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),
 });