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

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:

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