fix: improve system message layout and avatar consistency (#1061)

* fix: improve system message layout and avatar consistency

- Add flex-wrap to message header for proper text wrapping
- Move system action text to separate line using CSS order
- Make avatar sizes consistent across all message types
- Remove conditional avatar sizing for system messages

* Added the avatar size back to original size and keep the username truncation fix

* fix: prevent username truncation in system messages and add tooltip for long action text

---------

Co-authored-by: dodaa08 <dodaa08@users.noreply.github.com>

Author: dodaa08

packages/react/src/views/Message/Message.styles.js

@@ -179,10 +179,8 @@ export const getMessageHeaderStyles = (theme) => {
       font-size: 0.875rem;
       font-weight: 700;
       line-height: 1.25rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
-      flex-shrink: 1;
+      flex-shrink: 0;
     `,
 
     userName: css`
@@ -191,10 +189,8 @@ export const getMessageHeaderStyles = (theme) => {
       letter-spacing: 0rem;
       font-size: 0.875rem;
       line-height: 1.25rem;
-      overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
-      flex-shrink: 1;
+      flex-shrink: 0;
     `,
 
     userRole: css`

packages/react/src/views/Message/MessageHeader.js

@@ -165,6 +165,7 @@ const MessageHeader = ({
           css={styles.userActions}
           className={appendClassNames('ec-message-header-useractions')}
           style={{ marginLeft: '2px' }}
+          title={userActions()}
         >
           {userActions()}
         </Box>