diff --git a/.changeset/pink-buckets-hope.md b/.changeset/pink-buckets-hope.md new file mode 100644 index 0000000000..7ec3310c7e --- /dev/null +++ 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 index 23f924851e..5a98fee150 100644 --- 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( 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 index 0c775c6313..a591fa21dc 100644 --- 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 = () => ( - Nulla sit amet elit mauris. + + https://www.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.LONGURLTEST.com + 4:32pm