bug: attachment metadata text overlaps on mobile viewports

Description:

On mobile viewports (tested with multiple devices via Chrome DevTools device toolbar), the attachment filename and file size text overlap each other, making both unreadable.

Steps to reproduce:

1. Open EmbeddedChat Storybook (yarn storybook)
2. Log in and navigate to a channel with file attachments
3. Open the story in a new tab -> Open Chrome DevTools -> Toggle device toolbar -> Select Mobile Device

Expected behavior:

Filename (image.png) and file size (60.23 kB) should be clearly readable, either side by side or properly stacked with spacing.

Actual behavior:

The filename and file size text render on top of each other, making both unreadable. This happens on all mobile device presets (iPhone SE, iPhone XR, Pixel, etc).

Screenshots

root cause

In AttachmentMetadata.js, the inner flex container switches to flex-direction: column at ≤420px with only 4px gap. The title is truncated via JS substring(0, 22) instead of CSS text-overflow, and the elements lack proper white-space control, causing visual overlap.

Start with AttachmentMetadata.js and reproduce the issue in EmbeddedChat Storybook using yarn storybook and a mobile viewport in Chrome DevTools. Verify that the attachment filename and file size remain readable without overlap across the listed mobile device presets.