User message box overflows horizontally on mobile viewports #6200

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