From 1200c6d10322df142620373a8488e3e35b3f8f6a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 18 Sep 2025 08:10:14 +0530
Subject: [PATCH] revert avatar size and make arrow less sharp

---
 src/app/components/message/layout/Bubble.tsx    |  4 ++--
 src/app/components/message/layout/layout.css.ts |  3 +--
 src/app/features/room/message/Message.tsx       | 10 ++--------
 src/app/features/room/message/styles.css.ts     |  2 +-
 4 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/app/components/message/layout/Bubble.tsx b/src/app/components/message/layout/Bubble.tsx
index d811d87c..6668121e 100644
--- a/src/app/components/message/layout/Bubble.tsx
+++ b/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>
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index cb99713f..807cd12f 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/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({
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 5cfeecc8..9324e1c2 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/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>
diff --git a/src/app/features/room/message/styles.css.ts b/src/app/features/room/message/styles.css.ts
index dced5467..4be501bd 100644
--- a/src/app/features/room/message/styles.css.ts
+++ b/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({