[v4] Upload edit view: a wide custom `filePreview` widens the file panel and collapses the fields column

Open Beginner friendly
  • Is something wrong?
#19,412 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, next.js, react, typescript
Domain
frontend

Research direction

Start with the linked packages/ui/src/views/Edit/index.css rules at lines 176–188 and inspect the upload edit layout around .file-manager and .document-fields. Reproduce with the provided reproduction steps using a wide custom filePreview, then check that the file panel stays within its flex share and the fields, including the Alt input, remain visible while the preview scrolls or scales inside the panel.

Written by the indexing model from the issue text.

Description

area: ui Bug created-by: Contributor status: needs-triage v3
Describe the Bug

On an upload collection's edit view, when the edit-main container is at least 1024px wide, the file panel (.file-manager) sits next to .document-fields with flex: 2 (views/Edit/index.css#L176-L188). The panel has no min-width: 0, so as a flex item it can't get narrower than its content's min-content width.

A custom preview from upload.admin.components.filePreview whose content has a large intrinsic width pushes the panel past its share. Think of a spreadsheet grid, a document page at 100%, a wide table or a canvas. The fields column then shrinks to nothing. This happens even when the preview scrolls inside its own overflow: auto box.

In the repro with a 1920px window, the row is 1645px wide:

.file-manager .document-fields Alt input
as is 1645px 0px 18px
.file-manager { min-width: 0 } added 1097px 548px 484px

The Alt field can't be seen or edited at all. Payload's own previews don't trigger this: the thumbnail scales down, and the PDF iframe has no intrinsic width.

Expected: the panel keeps its flex share whatever the preview renders, and the preview scrolls or scales inside it.

Current:
Image

With min-width:0:

Image
Link to the code that reproduces this issue

https://github.com/VeiaG/payload-4-reproductions/tree/repro-file-panel-widens-with-wide-preview

Reproduction Steps
  1. pnpm install, then pnpm dev in apps/next.
  2. Upload any image to Media and open its edit view in a wide window (≥ 1024px content area).
  3. The file panel takes the whole width, and the Alt field column is gone.
  4. In devtools, add .collection-edit__main-wrapper--has-upload-panel .file-manager { min-width: 0 }. The columns go back to about 2:1, and the preview scrolls inside the panel.
Which area(s) are affected?

area: ui

Environment Info
payload: 4.0.0-beta.7
@payloadcms/ui: 4.0.0-beta.7
@payloadcms/next: 4.0.0-beta.7
next: 16.4.4
Node: 24
Browser: Chrome
Dominant language
TypeScript
Stars
45.6k
Forks
4.4k
Avg merge
1d 23h
Merged PRs (30d)
237

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from payloadcms/payload

All issues in payloadcms/payload

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.