make bubble message avatar smaller

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

@@ -17,14 +17,9 @@ export const BubbleLayout = as<'div', BubbleLayoutProps>(
       <Box
         className={classNames(
           css.BubbleContent,
-          css.BubbleContentArrow,
-          self
-            ? {
-                [css.BubbleContentArrowRight]: !!before,
-              }
-            : {
-                [css.BubbleContentArrowLeft]: !!before,
-              }
+          before ? css.BubbleContentArrow : undefined,
+          before && self ? css.BubbleContentArrowRight : undefined,
+          before && !self ? css.BubbleContentArrowLeft : undefined
         )}
         direction="Column"
       >

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

@@ -133,7 +133,12 @@ export const ModernBefore = style({
   minWidth: toRem(36),
 });
 
-export const BubbleBefore = style([ModernBefore]);
+export const BubbleBefore = style([
+  ModernBefore,
+  {
+    minWidth: toRem(22),
+  },
+]);
 
 export const BubbleContent = style({
   maxWidth: toRem(800),
@@ -153,6 +158,8 @@ export const BubbleContentArrow = style({
       width: toRem(8),
       height: toRem(8),
       position: 'absolute',
+      top: toRem(12),
+      zIndex: 1,
       transform: 'rotateZ(45deg)',
     },
   },
@@ -162,9 +169,6 @@ export const BubbleContentArrowLeft = style({
   selectors: {
     '&::before': {
       left: toRem(-4),
-      top: config.radii.R500,
-      zIndex: 1,
-      borderBottomLeftRadius: toRem(2),
     },
   },
 });
@@ -173,9 +177,6 @@ export const BubbleContentArrowRight = style({
   selectors: {
     '&::before': {
       right: toRem(-4),
-      top: config.radii.R500,
-      zIndex: 1,
-      borderTopRightRadius: toRem(2),
     },
   },
 });

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

@@ -747,7 +747,7 @@ export const Message = as<'div', MessageProps>(
       <Box
         gap="300"
         direction={messageLayout === MessageLayout.Compact ? 'RowReverse' : 'Row'}
-        justifyContent={messageLayout === MessageLayout.Bubble ? undefined : 'SpaceBetween'}
+        justifyContent="SpaceBetween"
         alignItems="Baseline"
         grow="Yes"
       >
@@ -795,7 +795,7 @@ export const Message = as<'div', MessageProps>(
         <Avatar
           className={css.MessageAvatar}
           as="button"
-          size="300"
+          size={messageLayout === MessageLayout.Bubble ? '200' : '300'}
           data-user-id={senderId}
           onClick={onUserClick}
         >
@@ -807,7 +807,13 @@ export const Message = as<'div', MessageProps>(
                 : undefined
             }
             alt={senderDisplayName}
-            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            renderFallback={() => (
+              <Icon
+                size={messageLayout === MessageLayout.Bubble ? '50' : '200'}
+                src={Icons.User}
+                filled
+              />
+            )}
           />
         </Avatar>
       </AvatarBase>