hide bubble for event content

src/app/components/message/content/EventContent.tsx

@@ -34,7 +34,11 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon
     return <CompactLayout before={beforeJSX}>{msgContentJSX}</CompactLayout>;
   }
   if (messageLayout === MessageLayout.Bubble) {
-    return <BubbleLayout before={beforeJSX}>{msgContentJSX}</BubbleLayout>;
+    return (
+      <BubbleLayout hideBubble before={beforeJSX}>
+        {msgContentJSX}
+      </BubbleLayout>
+    );
   }
   return <ModernLayout before={beforeJSX}>{msgContentJSX}</ModernLayout>;
 }

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

@@ -5,22 +5,27 @@ import * as css from './layout.css';
 
 type BubbleLayoutProps = {
   self?: boolean;
+  hideBubble?: boolean;
   before?: ReactNode;
 };
 
 export const BubbleLayout = as<'div', BubbleLayoutProps>(
-  ({ self, before, children, ...props }, ref) => (
+  ({ self, hideBubble, before, children, ...props }, ref) => (
     <Box direction={self ? 'RowReverse' : 'Row'} gap="300" {...props} ref={ref}>
       <Box className={css.BubbleBefore} shrink="No">
         {before}
       </Box>
       <Box
-        className={classNames(
+        className={
+          hideBubble
+            ? undefined
+            : classNames(
                 css.BubbleContent,
                 before ? css.BubbleContentArrow : undefined,
                 before && self ? css.BubbleContentArrowRight : undefined,
                 before && !self ? css.BubbleContentArrowLeft : undefined
-        )}
+              )
+        }
         direction="Column"
       >
         {children}

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

@@ -136,7 +136,7 @@ export const ModernBefore = style({
 export const BubbleBefore = style([
   ModernBefore,
   {
-    minWidth: toRem(22),
+    minWidth: toRem(24),
   },
 ]);