User message box overflows horizontally on mobile viewports

[cuevaio]

Description

On mobile viewports (e.g., iPhone 14 Pro Max at 430px width), the user message box in the share page overflows horizontally, breaking the page layout and causing horizontal scrolling.

Root Cause

The [data-component="user-message"] CSS lacks proper width constraints (min-width: 0 and max-width: 100%) to allow flex children to shrink below their content size. Additionally, the [data-slot="user-message-text"] element needs overflow-wrap: break-word and word-break: break-word to handle long unbroken text.

Steps to Reproduce

1. Open a shared session page (e.g., /share/[shareID])
2. View on mobile viewport or use device emulation (iPhone 14 Pro Max)
3. Observe the user message content overflowing horizontally

Expected Behavior

User message content should wrap properly and respect container boundaries on all viewport sizes.

Affected Files

• packages/ui/src/components/message-part.css

[github-actions]

This issue might be a duplicate of existing issues. Please check:

• Large pasted content renders poorly in chat history—overflows and blends with questions, hindering review #3007: Large pasted content renders poorly in chat history—overflows and blends with questions, hindering review

This issue also relates to similar layout/viewport handling challenges. Feel free to ignore if none of these address your specific case.