jerry/buzz

mirror of https://github.com/block/buzz.git synced 2026-10-27 12:40:30 +00:00

Files

Matt Toohey 6861e18a86 fix(desktop): keep FileCard inside narrow message rows (#8612 )

## Summary

Non-image attachment cards ran past their message row in the thread side
pane, and the download icon was clipped off.

`FileCard` is an `inline-flex` box, so it shrinks to fit its content and
is never narrower than its min-content width. That width comes from the
`truncate` (nowrap) filename. The only width cap was `max-w-sm` (24rem),
so a long filename pushed the card out to the full 24rem even when the
pane body was only about 300px wide (the default 380px thread pane).

- Add `max-w-full`, so the cap becomes `min(24rem, 100%)`. The flex
column ancestors already have `min-w-0`, so the percentage resolves
against the pane width. The card shrinks, the filename gets an ellipsis,
and the size and download icon stay visible. Wider surfaces (forum
posts, DMs, wide timelines) look the same because 100% is wider than
24rem there.
- Add a Playwright regression test in `file-attachment.spec.ts`. It
seeds a text attachment with a long filename and opens its thread. It
then checks that the card and its trailing icon stay inside the row and
that the filename is actually truncated. Without the fix, the card's
right edge lands about 82px past the row.

## Before / After

| Before | After |
| --- | --- |
| ![Before: in the 380px thread pane the attachment card runs past the
right edge of its message row, the filename is cut off mid-word, and the
download icon is clipped out of
view](https://github.com/user-attachments/assets/fca47df1-71c5-44d8-91af-a0b3085f1802)
| ![After: the attachment card fits inside the message row, the long
filename ends in an ellipsis, and the "13 KB" size and download icon are
both
visible](https://github.com/user-attachments/assets/3217b650-0296-4b11-942a-cf739056b680)
|

Measured in the default 380px thread pane: before, the card's right edge
sits at 1342px against a row edge of 1260px (+82px overflow); after, it
sits at 1252px (8px inside the row).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Signed-off-by: Matt Toohey <contact@matttoohey.com>
Co-authored-by: Claude Fable 5.1 <noreply@anthropic.com>

2026-10-27 14:40:28 +11:00