revert avatar size and make arrow less sharp

src/app/components/message/layout/Bubble.tsx

@@ -19,7 +19,7 @@ function BubbleLeftArrow({ variant }: BubbleArrowProps) {
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M9 8V0L0 0L8 8H9Z"
+        d="M9.00004 8V0H4.82847C3.04666 0 2.15433 2.15428 3.41426 3.41421L8.00004 8H9.00004Z"
         fill={color[variant].Container}
       />
     </svg>
@@ -34,7 +34,7 @@ type BubbleLayoutProps = {
 
 export const BubbleLayout = as<'div', BubbleLayoutProps>(
   ({ hideBubble, before, header, children, ...props }, ref) => (
-    <Box gap="200" {...props} ref={ref}>
+    <Box gap="300" {...props} ref={ref}>
       <Box className={css.BubbleBefore} shrink="No">
         {before}
       </Box>

src/app/components/message/layout/layout.css.ts

@@ -134,8 +134,7 @@ export const ModernBefore = style({
 });
 
 export const BubbleBefore = style({
-  minWidth: toRem(24),
-  marginLeft: config.space.S300,
+  minWidth: toRem(36),
 });
 
 export const BubbleContent = style({

src/app/features/room/message/Message.tsx

@@ -797,7 +797,7 @@ export const Message = as<'div', MessageProps>(
         <Avatar
           className={css.MessageAvatar}
           as="button"
-          size={messageLayout === MessageLayout.Bubble ? '200' : '300'}
+          size="300"
           data-user-id={senderId}
           onClick={onUserClick}
         >
@@ -809,13 +809,7 @@ export const Message = as<'div', MessageProps>(
                 : undefined
             }
             alt={senderDisplayName}
-            renderFallback={() => (
-              <Icon
-                size={messageLayout === MessageLayout.Bubble ? '50' : '200'}
-                src={Icons.User}
-                filled
-              />
-            )}
+            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
           />
         </Avatar>
       </AvatarBase>

src/app/features/room/message/styles.css.ts

@@ -25,7 +25,7 @@ export const MessageOptionsBar = style([
 ]);
 
 export const BubbleAvatarBase = style({
-  paddingTop: toRem(6),
+  paddingTop: 0,
 });
 
 export const MessageAvatar = style({