diff --git a/src/app/components/message/content/EventContent.tsx b/src/app/components/message/content/EventContent.tsx
index b1963103..130ba8c9 100644
--- a/src/app/components/message/content/EventContent.tsx
+++ b/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>;
 }
diff --git a/src/app/components/message/layout/Bubble.tsx b/src/app/components/message/layout/Bubble.tsx
index 8e3b8c5c..267bda04 100644
--- a/src/app/components/message/layout/Bubble.tsx
+++ b/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(
-          css.BubbleContent,
-          before ? css.BubbleContentArrow : undefined,
-          before && self ? css.BubbleContentArrowRight : undefined,
-          before && !self ? css.BubbleContentArrowLeft : undefined
-        )}
+        className={
+          hideBubble
+            ? undefined
+            : classNames(
+                css.BubbleContent,
+                before ? css.BubbleContentArrow : undefined,
+                before && self ? css.BubbleContentArrowRight : undefined,
+                before && !self ? css.BubbleContentArrowLeft : undefined
+              )
+        }
         direction="Column"
       >
         {children}
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index e9591863..db7b8795 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/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),
   },
 ]);