[v4] Document controls: empty `__icon-buttons` wrapper doubles the gap before Save

Maintainers usually reply within 1 day

Assessment

Research direction

Description

Describe the Bug.

DocumentControls always renders <div className="doc-controls__icon-buttons">, even when none of its children render (live preview toggler, preview button, schedule publish button). The wrapper is still a flex item of .doc-controls__controls, which has gap: var(--spacer-2). So when it's empty, the space between whatever comes before it and the Save / Publish button doubles: 8px + 0px + 8px = 16px.

You can see this with any admin.components.edit.beforeDocumentControls component on a collection that has no live preview, no admin.preview and no scheduled publish. The custom control sits noticeably further from Save than the other controls in the row are from each other.

Expected: the gap before Save is 8px whether or not the icon buttons render.

Without icon buttons (bug, 16px):

With admin.preview (8px + 8px) :

Measured getBoundingClientRect() of the .doc-controls__controls children:

Collection	Marker → icon-buttons	icon-buttons width	icon-buttons → Save	Marker → Save
posts (no icon buttons)	8px	0px	8px	16px
posts-with-preview	8px	24px	8px	n/a (preview button in between)

Link to the code that reproduces this issue

https://github.com/VeiaG/payload-4-reproductions/tree/repro-doc-controls-empty-icon-buttons-gap

Source: packages/ui/src/elements/DocumentControls/index.tsx#L306-L317

<div className={`${baseClass}__icon-buttons`}>
  {isLivePreviewEnabled && !isInDrawer && <LivePreviewToggler />}
  {(collectionConfig?.admin.preview || globalConfig?.admin.preview) && (
    <RenderCustomComponent CustomComponent={CustomPreviewButton} Fallback={<PreviewButton />} />
  )}
  {hasScheduledPublishEnabled(collectionConfig || globalConfig) && !isTrashed && (
    <SchedulePublishButton disabled={readOnlyForIncomingUser} />
  )}
</div>

Reproduction Steps

1. pnpm install && pnpm dev, then open http://localhost:3000/admin.
2. Open the seeded doc in Posts. Its beforeDocumentControls renders a 32px red square, and the collection has no live preview, admin.preview or scheduled publish.
3. The square sits 16px from Save. In devtools there is an empty .doc-controls__icon-buttons div between them.
4. Open the seeded doc in Posts With Preview. It's the same collection plus admin.preview, and the gaps are 8px on each side of the preview button, as intended.

Same result on TanStack Start (pnpm dev:tanstack, checked on beta.6).

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)
@payloadcms/tanstack-start: 4.0.0-beta.7
Node: 24
OS: Windows 11

Getting set up

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

• plugin-multi-tenant: `isGlobal` collections redirect tenant-scoped users to `/admin` since 3.93.0 (GlobalViewRedirect prop-name mismatch)

  Possibly taken A pull request linked to this issue is open or already merged. Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  Bug plugin: multi-tenant

  Difficulty 2/5 1-3 hours Newbie friendliness 76/100

  payloadcms/payload#19420 · Opened Nov 6, 2026

  Maintainers usually reply within 1 day

• [v4] Group field: the divider of a second group inside a collapsible is drawn through the group's label

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  area: ui Bug created-by: Contributor status: needs-triage v3

  Difficulty 2/5 1-3 hours Newbie friendliness 78/100

  payloadcms/payload#19413 · Opened Nov 6, 2026

  Maintainers usually reply within 1 day

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

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  area: ui Bug created-by: Contributor status: needs-triage v3

  Difficulty 2/5 1-3 hours Newbie friendliness 78/100

  payloadcms/payload#19412 · Opened Nov 6, 2026

  Maintainers usually reply within 1 day

• [v4] Side drawer grows with its content instead of scrolling inside, so `position: sticky` in a Drawer never sticks

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  area: ui Bug created-by: Contributor status: needs-triage v3

  Difficulty 2/5 1-3 hours Newbie friendliness 78/100

  payloadcms/payload#19403 · Opened Nov 6, 2026

  Maintainers usually reply within 1 day

• [v4] Button: `buttonStyle="link"` is in the type but has no styles

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  area: ui Bug created-by: Contributor status: needs-triage v3

  Difficulty 2/5 1-3 hours Newbie friendliness 72/100

  payloadcms/payload#19396 · Opened Nov 6, 2026

  Maintainers usually reply within 1 day

All issues in payloadcms/payload

Similar issues

• Usage limits hide the account label at wider sizes

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel

  Difficulty 2/5 1-3 hours Newbie friendliness 68/100

  pingdotgg/t3code#32525 · Opened Nov 7, 2026

  Maintainers usually reply within 1 day

• [Documentation] Document missing `DyvixCommandMenu` attributes.

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  documentation easy good first issue help wanted

  Difficulty 1/5 1-3 hours Newbie friendliness 83/100

  younisdev/dyvix-ui#557 · Opened Nov 7, 2026

  Maintainers usually reply within 1 day

• Billion-context documentation addendum: nudge is independent of window occupancy. | billion-context 文档补充：nudge 与窗口占用无关

  Possibly taken A pull request linked to this issue is open or already merged. Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel

  Difficulty 1/5 1-3 hours Newbie friendliness 86/100

  ranxianglei/billion-context#5893 · Opened Nov 7, 2026

  Maintainers usually reply within 1 day

• [Bug] JavaScript/TypeScript tokenizer: regex literals with `/` inside `[...]` or with the `v` flag are not recognized

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel

  Difficulty 2/5 1-3 hours Newbie friendliness 79/100

  microsoft/monaco-editor#5575 · Opened Nov 7, 2026

  Maintainers usually reply within 1 day

• Enlarge small crops in crop_image

  Open

  ⋯Report a problem with this issue

  • Is something wrong?

  • Already taken
  • Not beginner-friendly
  • Stale or invalid
  • Something else…
  • Send Cancel
  enhancement

  Difficulty 2/5 1-3 hours Newbie friendliness 68/100

  mmalecki/mattermost-ai-bot#9 · Opened Nov 7, 2026

More TypeScript issues