fix(chatlog): fix overflow on message bubbles (#3723)

* fix(chatlog): fix overflow on message bubbles * chore: add story example that covers a very long, wrapping word
twilio-labs · Jan 26, 2024 · 41b3668 · 41b3668
1 parent e0e69e7
commit 41b3668
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/.changeset/pink-buckets-hope.md b/.changeset/pink-buckets-hope.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/chat-log": patch
+"@twilio-paste/core": patch
+---
+
+[ChatLog] Fix overflow on message bubbles
diff --git a/packages/paste-core/components/chat-log/src/ChatBubble.tsx b/packages/paste-core/components/chat-log/src/ChatBubble.tsx
@@ -45,6 +45,9 @@ export const ChatBubble = React.forwardRef<HTMLDivElement, ChatBubbleProps>(
         paddingY="space30"
         paddingX="space40"
         marginBottom="space30"
+        wordWrap="break-word"
+        maxWidth="100%"
+        minWidth={0}
         element={element}
         ref={ref}
         variant={variant}

diff --git a/packages/paste-core/components/chat-log/stories/index.stories.tsx b/packages/paste-core/components/chat-log/stories/index.stories.tsx
@@ -170,7 +170,9 @@ export const ExampleChatLog: StoryFn = () => (
       </ChatMessageMeta>
     </ChatMessage>
     <ChatMessage variant="outbound">
-      <ChatBubble>Nulla sit amet elit mauris.</ChatBubble>
+      <ChatBubble>
+        https://www.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.com
+      </ChatBubble>
       <ChatMessageMeta aria-label="said by you at 4:32pm">
         <ChatMessageMetaItem>4:32pm</ChatMessageMetaItem>
       </ChatMessageMeta>