# From a truncated column to an in-browser attachment viewer

One complaint about a truncated Size column shipped as a feature: an in-browser preview modal for images, video, audio, and PDFs, for $24.53.

Source: https://codeherder.com/examples/attachment-preview-modal/

Examples · New feature

Fixed the truncated Size column and shipped an in-browser preview modal for images, video, audio, and PDFs, with zoom and a download fallback.

[Request access →](https://codeherder.com/get-started/#request-access)

Measured from this task's real merge.

The attachments table clipped its own Size column, and there was no way to look at an attachment without downloading it first: not an image, not a video, not a PDF.

What was asked for

> Ridiculous that the size is truncated on this table. Also we need to be able to view attachments... so we should be able to preview images, videos or PDF's etc in the browser in a popover/modal.

Filed from the web app, no CLI or git required (react, css).

What the herd did

1. plan
2. code
3. review
4. merge
5. verify
6. done

What it changed

The merge touched 23 files (+1055 −122). Among them:

- `app/src/components/AttachmentPreviewModal.tsx`
- `app/src/components/AttachmentsSection.tsx`
- `app/src/lib/formatBytes.ts`
- `app/src/config/csp.ts`
- `docs/attachments.md`

What it cost

$24.53 in model spend, 395 agent turns, and 1h 51m from filed to merged. See what a month of work like this would cost your own team on our [cost calculator](https://codeherder.com/calculator).

A one-line complaint can be the entry point to a feature nobody had formally scoped yet.