From 91febe0afed96bebd6215db391df3edcfbfe1c3f Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Thu, 12 Mar 2026 16:44:06 -0500
Subject: [PATCH] fix bubble layout overflow

---
 .changeset/fix-bubble-layout-overflow.md        | 5 +++++
 src/app/components/message/layout/Bubble.tsx    | 2 +-
 src/app/components/message/layout/layout.css.ts | 8 +++++++-
 3 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-bubble-layout-overflow.md

diff --git a/.changeset/fix-bubble-layout-overflow.md b/.changeset/fix-bubble-layout-overflow.md
new file mode 100644
index 000000000..18198baff
--- /dev/null
+++ 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
index 18510df56..21120da47 100644
--- 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
index 32dedb17d..c6e30509f 100644
--- 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,