diff --git a/.changes/fix-bubble-x-overflow.md b/.changes/fix-bubble-x-overflow.md
new file mode 100644
index 0000000..3f1569e
--- /dev/null
+++ b/.changes/fix-bubble-x-overflow.md
@@ -0,0 +1,5 @@
+---
+"@matechat/react": patch:fix
+---
+
+Fixed an issue where the `Bubble` component would overflow horizontally when a single word was too long.
diff --git a/src/bubble/index.tsx b/src/bubble/index.tsx
index 1d19068..4b94f26 100644
--- a/src/bubble/index.tsx
+++ b/src/bubble/index.tsx
@@ -12,7 +12,7 @@ import { twMerge } from "tailwind-merge";
 import { BlockQuote, CodeBlock, Heading, Link } from "./markdown";
 
 const bubbleVariants = cva(
-  "flex flex-col gap-1 justify-center rounded-lg dark:text-gray-200 text-gray-800 max-w-full overflow-x-auto",
+  "flex flex-col gap-1 justify-center rounded-lg dark:text-gray-200 text-gray-800 max-w-full whitespace-pre-wrap break-words",
   {
     variants: {
       size: {