fix bubble layout overflow

7w1 · 7w1 · commit 91febe0afed9 · 2026-03-12T16:44:06.000-05:00
diff --git a/.changeset/fix-bubble-layout-overflow.md b/.changeset/fix-bubble-layout-overflow.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fix bubble layout messages overflowing off the screen with embeds/images.
diff --git a/src/app/components/message/layout/Bubble.tsx b/src/app/components/message/layout/Bubble.tsx
@@ -70,7 +70,7 @@ export const BubbleLayout = as<'div', BubbleLayoutProps>(
           {hideBubble ? (
             children
           ) : (
-            <Box>
+            <Box className={css.BubbleWrapper}>
               <Box
                 className={
                   hideBubble
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
@@ -152,8 +152,14 @@ export const BubbleBefore = style({
   minWidth: toRem(36),
 });
 
+export const BubbleWrapper = style({
+  maxWidth: '100%',
+  minWidth: 0,
+});
+
 export const BubbleContent = style({
-  maxWidth: toRem(800),
+  maxWidth: `min(${toRem(800)}, 100%)`,
+  minWidth: 0,
   padding: config.space.S200,
   backgroundColor: color.SurfaceVariant.Container,
   color: color.SurfaceVariant.OnContainer,

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +default: patch
 +---
++
 +Fix bubble layout messages overflowing off the screen with embeds/images.