MessageContent max width should respect parent's

[obadakhalili]

Why

I have a relatively small chat container that is has a width of 420px. when a message contains a code block that has somewhat long code lines, this causes the entire chat ui to overflow horizontally, showing a scrollbar at the bottom of the chat ui to show the entire code block as shown in this video and causing a bad UX:

Fix

a message is rendered inside these components, which seems how it is supposed to be done as per the docs:

└─ Message
    └─ MessageContent
        └─ MessageResponse // displays message text

streamdown code block styling has an overflow-x-auto, telling it to show a scrollbar when its content is causing the width to be larger than the container's. the problem is that the container in this case, MessageContent, has a w-fit class, which dictates that the width can't be smaller than its content width (code block in this case), and larger than its parent width, Message, which since it has flex class, it means that Message children flex items have a default max-width: auto, which scales as much as the content needs, in this case as much as code block needs. the solution is to guard MessageContent by overriding the default and specifically telling it its max width can't be more than 100% of its parent. its parent has a (now) max-w-[95%], which means it will be 95% of whatever the parent of Message is. in my case, it is 420px.

why the max-w-[95%] change? after my changes, messages actually started to take 80% of the width (unlike before) and it caused it to look dissimilar to how it used to look before my changes. so I think a default of 95% achieves the intended result here.

with this change, the scrollbar shows inside the code block as it should be if the contents of the block overflows the parent's available width, like this:

[vercel]

@obadakhalili is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[vedant-8680]

Important issue for us too - do solve it!

[haydenbleasel]

fantastic fix, thanks @obadakhalili 🚀